jsを使用して虫眼鏡効果を実装するサンプルコード

<スタイル & gt; *{
マージン: 0px;
パディング: 0px;
マージン:
マージンの高さ: 17%;他の要素がこの要素に依存して位置決めできるように、ここで相対位置を設定します
}
#move{
background-color:green;
width:220px;
height:220px;
Position:absolute;
left:0px;
top: 0px;
display:none;//最初に非表示にし、js を使用して表示します
}
#bimg{
width:430px;
height:430px;
overflow:hidden;
Position:absolute;
top: 0px;
left:450px;
display:none;//最初に非表示にし、js を使用して表示します
}
#bimg img{
width:800px;
height:800px;
Position:absolute;
top:0px ;
left: 0px;
}

<script><br> function bigimg(){<br> var bbox = document.getElementById("box" );<br> var bmove = document.getElementById("move");<br> var bbimg = document.getElementById("bimg");<br> var b_bimg = document.getElementById("b_bimg");<br> bbox.onmouseover = function(){ //マウスをボックスに移動すると、大きな画像と選択ボックスが表示されます<br>bbimg.style.display = "block";<br>bmove.style.display="block";<br> }<br> bbox.onmouseout = function(){//マウスを移動しますボックスを開いて大きな画像や選択ボックスを表示しないでください<br>bbimg.style.display = "none";<br>bmove.style.display="none";<br> }<br> bbox.onmousemove = function(e){//マウス位置<br>var x = e.clientX;//ビューポートに対するマウスの位置<br>var y = e.clientY;<br>var t = bbox.offsetTop;//ビューポートに対するボックスの位置<br>var l = bbox.offsetLeft;<br>var _left = x - l - bmove.offsetWidth/2;//移動位置を計算<br>var _top = y - t -bmove.offsetHeight/2;<br>if(_top<=0)/ /ボックスの上部にスライド<br/> _top = 0;<br/>else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//ボックスの下部にスライド<br> _top = bbox.offsetHeight-bmove.offsetHeight ;<br>if (_left<=0)// ボックスの左端までスライドします <br/> _left=0;<br/>else if(_left>=bbox.offsetWidth-bmove.offsetWidth)// ボックスの右端までスライドします <br> _left=bbox。 offsetWidth-bmove.offsetWidth ;<br>bmove.style.top = _top +"px";//移動の位置を設定<br>bmove.style.left = _left + "px";<br>var w = _left/(bbox.offsetWidth -bmove.offsetWidth);//移動の割合を計算します<br>var h = _top/(bbox.offsetHeight-bmove.offsetHeight);<br>var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//大きな画像の位置<br>var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w ;<br>b_bimg.style.top = -b_bimg_top + "px";//大きな画像の位置情報を設定します<br>b_bimg.style。 left = -b_bimg_left + "px";<br> }<br><br> }<br> </script>
< ;/body>

黒い矢印:

1

2

var x = e.clientX; code><code class="js comments">// ビューポートに対するマウスの位置 code>

var y = e.clientY;

var x = e.clientX;//鼠标相对于视口的位置

var y = e.clientY;

赤い矢印:

1 2	var t = bbox.offsetTop;//ビューポートを基準としたボックスの位置var t = bbox.offsetTop;//box相对于视口的位置 var l = bbox.offsetLeft;

橙色箭头：

 

1 2	var _left = x - l - bmove.offsetWidth/2;//计算move的位置 var _top = y - t -bmove.offsetHeight/2;

2、bimg块的计算

利用move块在可移动范围内的比例来设置大图的位置

move块的移动范围：

 

1	bbox.offsetWidth-bmove.offsetWidth

move块现在的坐标占可移动范围的比例：

 

1 2	var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例 var h = _top/(bbox.offsetHeight-bmove.offsetHeight);

bimg的移动范围：

 

1	b_bimg.offsetHeight-bbimg.offsetHeight

bimg的位置：

 

1 2	var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置 var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w; var l = bbox.offsetLeft;

🎜🎜オレンジ色の矢印: 🎜🎜🎜🎜 🎜🎜🎜🎜🎜🎜1🎜🎜2🎜🎜 🎜 🎜🎜var _left = x - l - bmove.offsetWidth/2;// を計算します。移動位置 🎜🎜var _top = y - t -bmove.offsetHeight/2;🎜🎜 🎜🎜🎜 🎜🎜🎜🎜2. bimgブロックの計算🎜🎜移動可能な範囲内の移動ブロックの割合を使用して、大きな画像の位置を設定します🎜🎜移動ブロックの移動範囲: 🎜🎜🎜🎜 🎜🎜 🎜🎜🎜🎜1🎜🎜🎜 🎜🎜bbox.offsetWidth-bmove.offsetWidth🎜🎜🎜🎜🎜🎜🎜🎜🎜移動ブロックの現在の座標が比率を占めます可動範囲: 🎜🎜🎜🎜 🎜🎜🎜 🎜🎜🎜1🎜🎜2🎜🎜🎜🎜🎜var w = _left /(bbox.offsetWidth-bmove.offsetWidth);<code class="js comments">//動きの割合を計算する🎜🎜var h = _top /(bbox.offsetHeight-bmove.offsetHeight);🎜🎜🎜🎜🎜🎜🎜🎜🎜bimgの移動範囲: 🎜🎜🎜🎜 🎜🎜🎜🎜🎜 🎜1🎜🎜🎜 🎜🎜b_bimg.offsetHeight-bbimg.offsetHeight🎜🎜🎜🎜🎜🎜🎜🎜bimg 位置: 🎜🎜🎜1 🎜🎜2🎜 🎜🎜🎜🎜varb_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;</codeclass>//計算 全体像の位置🎜🎜var b_bimg_left = (b_bimg .offsetWidth-bbimg.offsetWidth)*w;🎜🎜🎜🎜🎜🎜🎜🎜

以上がjsを使用して虫眼鏡効果を実装するサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。