原生js实现放大镜
原理：左边阴影在左边图片上从左到右移动的时候，右边大框也在右边大图片上从左到右移动（尽管在视觉、原理和代码上是相反的）；所谓放大，其实就是一张原本就很小的图对应一张原本就很大的图。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.small{
width:400px;
height:400px;
position:relative;
background:url(http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=7dca2c442134be6a652e087296c8ac80)no-repeatcenter;
border:1pxsolid#ccc;
}
.small.inner{
width:100px;
height:100px;
background:yellow;
opacity:0.5;
filter:alpha(opacity=50);
position:absolute;
left:0;
top:0;
display:none;
}
.big{
width:400px;
height:400px;
position:absolute;
left:410px;
top:0;
overflow:hidden;
border:1pxsolid#ccc;
display:none;
}
.bigimg{
width:200%;
height:200%;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<divid="small"class="small">
<divclass="inner"></div>
</div>
<divid="big"class="big">
<imgsrc="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d7dec5aeff022ea80c47eb76dc5838d8"alt=""/>
</div>
<script>
varsmall=document.getElementById('small');
varinner=small.getElementsByTagName('div')[0];
varbig=document.getElementById('big');
varimg=big.getElementsByTagName('img')[0];
//当鼠标移入small的时候，inner和big显示
small.onmouseover=function(){
big.style.display='block';
inner.style.display='block';
};
//当鼠标在small移动的时候：1）鼠标在inner的中间2）inner跟随鼠标移动
small.onmousemove=function(e){
e=e||window.event;
varleft=e.clientX-this.offsetLeft-inner.offsetWidth/2;
vartop=e.clientY-this.offsetTop-inner.offsetHeight/2;
if(left<=0){
left=0;
}elseif(left>=this.offsetWidth-inner.offsetWidth){
left=this.offsetWidth-inner.offsetWidth
}
if(top<=0){
top=0;
}elseif(top>=this.offsetHeight-inner.offsetHeight){
top=this.offsetHeight-inner.offsetHeight
}
inner.style.left=left+'px';
inner.style.top=top+'px';
//当inner移动的时候，大图跟着一起移动，并且，大图和inner移动的方向相反；
//或者理解为：左边阴影在图片上从左到右移动的时候，右边大框也在大图片上从左到右移动（尽管视觉上是相反的）。
img.style.left=left/(small.offsetWidth-inner.offsetWidth)*(big.offsetWidth-img.offsetWidth)+'px';
img.style.top=top/(small.offsetHeight-inner.offsetHeight)*(big.offsetHeight-img.offsetHeight)+'px';
};
//当鼠标移出的时候，inner和big隐藏；
small.onmouseout=function(){
big.style.display='none';
inner.style.display='none';
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！