黒い矢印:
var x = e.clientX; code><code class="js comments">// ビューポートに対するマウスの位置 code>
var y = e.clientY;
|
var x = e.clientX; //鼠标相对于视口的位置
var y = e.clientY;
赤い矢印:
橙色箭头:
2、bimg块的计算 利用move块在可移动范围内的比例来设置大图的位置 move块的移动范围:
move块现在的坐标占可移动范围的比例:
bimg的移动范围:
bimg的位置:
_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🎜 🎜🎜🎜🎜var var b_bimg_left = (b_bimg .offsetWidth-bbimg.offsetWidth)*w; 🎜🎜🎜🎜🎜🎜🎜🎜 |
以上がjsを使用して虫眼鏡効果を実装するサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。