京东放大镜效果实现 + 原理分析

function fn(e){

var X=e.clientX-smallbox.offsetLeft; //光标在盒子内的坐标

var Y=e.clientY-smallbox.offsetTop;

maskX=X-mask.offsetWidth/2; //遮盖层到盒子左和上的距离

maskY=Y-mask.offsetHeight/2;

if(maskX<=0){ //判断是否出界

maskX=0;

}else if(maskX>=smallbox.offsetWidth-mask.offsetWidth){

maskX=smallbox.offsetWidth-mask.offsetWidth;

}

if(maskY<=0){

maskY=0;

}else if(maskY>=smallbox.offsetHeight-mask.offsetHeight){

maskY=smallbox.offsetHeight-mask.offsetHeight;

}

mask.style.left=maskX + ‘px’; //判断完是否出界后将距离赋值给遮盖层

mask.style.top=maskY + ‘px’;

var bigphoto=document.querySelector(‘.bigphoto’); //获取到右侧的大图片

var bigMapMaxX=bigphoto.offsetWidth-bigbox.offsetWidth; //大图片最大的移动距离

var bigMapMaxY=bigphoto.offsetHeight-bigbox.offsetHeight;

var maskMaxX=smallbox.offsetWidth-mask.offsetWidth; //遮盖层最大的移动距离

var maskMaxY=smallbox.offsetHeight-mask.offsetHeight;

var maxMapX=maskX*bigMapMaxX/maskMaxX; //大盒子移动的距离

var maxMapY=maskY*bigMapMaxY/maskMaxY;

bigphoto.style.left=-maxMapX + ‘px’;

bigphoto.style.top=-maxMapY + ‘px’;

}

smallbox.addEventListener(‘mouseup’,function(e){ //鼠标松开后删除mousemove事件

smallbox.removeEventListener(‘mousemove’,fn);

mask.style.display=‘none’;

bigbox.style.display=‘none’;

})

})

})

---

完整代码：

=====