質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

582閲覧

画像拡大して、mousemoveイベントで画像を動かした時マウスの位置と画像の位置を合わせたい

the_zombis

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/07/28 03:18

編集2020/07/28 03:20

ちょっと説明が難しいのですが、現在以下のようなことをしています。

マウスオーバーでポジションの位置取得
マウスムーブで画像が拡大・動く
マウスアウトでもとの拡大と位置を元に戻す。

で以下のようなコードを実行すると拡大して画像の中心を基準としてマウスが左に動けば画像は右に動くということをjavascript内でCSSのtranslate3dで表現しています。

ただ単にマウスの移動量分、画像を右に動かすと移動しすぎて画像の左端が「img_wrap」の内側に来て余白ができる為、「var move_x = vx/4;」と4で割って移動量を少なくすることで「img_wrap」全体に画像が表示されつつ画像が動くようにしています。

ただ私がやりたいことは、マウスが一番左に移動したときは拡大した画像の左端を表示させるように計算したいのです。
その移動量の計算方法みたいのが分からないのです。

ご教授いただければ幸いです。

html

1<div id="wrapper"> 2<div class="img_wrap"> 3 <img class="img_target" src="画像"> 4</div> 5 6<div class="img_wrap"> 7 <img class="img_target" src="画像"> 8</div> 9 10<div class="img_wrap"> 11 <img class="img_target" src="画像"> 12</div> 13 14</div>

css

1#wrapper{ 2 display:flex; 3} 4 5.img_wrap { 6 width: 600px; 7 height:auto; 8 overflow: hidden; 9 border:1px solid #ccc; 10} 11 12img { 13 width:100%; 14 max-width: 100%; 15 vertical-align: bottom; 16 -moz-transition: -moz-transform 0.2s ease-out; 17 -webkit-transition: -webkit-transform 0.2s ease-out; 18 -o-transition: -o-transform 0.2s ease-out; 19 -ms-transition: -ms-transform 0.2s ease-out; 20 transition: transform 0.2s ease-out; 21} 22 23 24 25

javascript

1var imgTarget = document.querySelectorAll(".img_target"); 2var imgCenterH = 300; 3var imgCenterW = 300; 4var imgPosTop = 0; 5var imgPosLeft = 0; 6var scale=1.5; 7 8for (var i = 0; i < imgTarget.length; i++) { 9 imgTarget[i].addEventListener("mousemove", imgMove); 10 imgTarget[i].addEventListener("mouseover", getPos); 11 imgTarget[i].addEventListener("mouseout", resetStyle); 12} 13 14function getPos(event) { 15 imgPosTop = event.target.getBoundingClientRect().top; 16 imgPosLeft = event.target.getBoundingClientRect().left; 17 consolo.log(imgPosTop); 18} 19 20function imgMove(event) { 21 22 var vx = event.clientX - (imgPosLeft + imgCenterW); 23 var move_x = vx/4; 24 25 26 var vy = event.clientY - (imgPosTop + imgCenterH); 27 var move_y = vy/4; 28 29 var styles = this.style; 30 styles.transform = 31 "translate3d(" + (-move_x) + "px," + (-move_y) + "px,0) scale("+scale+")"; 32 33} 34 35function resetStyle(event) { 36 var styles = this.style; 37 styles.transform = "translate3d(0, 0, 0) scale(1)"; 38} 39

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問