ちょっと説明が難しいのですが、現在以下のようなことをしています。
マウスオーバーでポジションの位置取得
マウスムーブで画像が拡大・動く
マウスアウトでもとの拡大と位置を元に戻す。
で以下のようなコードを実行すると拡大して画像の中心を基準としてマウスが左に動けば画像は右に動くということを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
あなたの回答
tips
プレビュー