原生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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!