本文实例为大家分享了js放大镜效果展示的具体代码，供大家参考，具体内容如下
具体代码如下:
@H_404_18@
//放大镜的原理: 我们的mark横向是Box的一半，纵向也是Box的一半，那么右侧的大图横向（纵向）应该是左侧小图的2倍
var Box = document.getElementById('Box');
var mark = document.getElementById('mark');
var BoxRight = document.getElementById('BoxRight');
//设置mark这个盒子
function setPosition(e){
var top = e.clientY - Box.offsetTop - (mark.offsetHeight/2);
var left = e.clientX - Box.offsetLeft - (mark.offsetWidth/2);
//边界判断
var tempL = 0,tempT = 0;
var minL = 0,minT = 0,maxL = Box.offsetWidth - mark.offsetWidth,maxT = Box.offsetHeight - mark.offsetHeight ;
if(left<minL){
mark.style.left = minL + "px";
tempL = minL;
}else if(left>maxL){
mark.style.left = maxL + "px";
tempL = maxL;
}else{
mark.style.left = left + "px";
tempL = left;
}
if(top<minT){
mark.style.top = minT + "px";
tempT = minT;
}else if(top>maxT){
mark.style.top = maxT + "px";
tempT = maxT;
}else{
mark.style.top = top + "px";
tempT = top;
}
//右侧<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>跟着运动:左侧移动多少，右侧跟着移动他的2倍即可
var oImg = <a href="/tag/Box/" target="_blank" class="keywords">Box</a>Right.getElementsByTagName("img")[0];
oImg.style.left = -tempL*2 + "px";
oImg.style.top = -tempT*2 + "px";
}
<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.onmouseenter = function(e){
e = e || window.event;
mark.style.display = "block";
setPosition(e);
<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Right.style.display = "block";
}
<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.onmousemove = function(e){
e = e || window.event;
setPosition(e);
}
<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.onmouseleave = function(e){
e = e || window.event;
mark.style.display = "none";
<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Right.style.display = "none";
}