검은색 화살표:
|
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;
|
_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 b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//계산 큰 그림의 위치🎜🎜var b_bimg_left = (b_bimg .offsetWidth-bbimg.offsetWidth)*w;🎜🎜🎜🎜🎜🎜🎜🎜위 내용은 js를 사용하여 돋보기 효과를 구현하는 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!