原生js实现放大镜
程序员文章站
2023-12-03 16:00:04
原理:左边阴影在左边图片上从左到右移动的时候,右边大框也在右边大图片上从左到右移动(尽管在视觉、原理和代码上是相反的);所谓放大,其实就是一张原本就很小的图对应一张原本就很...
原理:左边阴影在左边图片上从左到右移动的时候,右边大框也在右边大图片上从左到右移动(尽管在视觉、原理和代码上是相反的);所谓放大,其实就是一张原本就很小的图对应一张原本就很大的图。
<!doctype html> <html lang="en"> <head> <meta charset="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-repeat center; border: 1px solid #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: 1px solid #ccc; display: none; } .big img{ width: 200%; height: 200%; position: absolute; left:0; top:0; } </style> </head> <body> <div id="small" class="small"> <div class="inner"></div> </div> <div id="big" class="big"> <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d7dec5aeff022ea80c47eb76dc5838d8" alt=""/> </div> <script> var small=document.getelementbyid('small'); var inner=small.getelementsbytagname('div')[0]; var big=document.getelementbyid('big'); var img=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; var left=e.clientx-this.offsetleft-inner.offsetwidth/2; var top=e.clienty-this.offsettop-inner.offsetheight/2; if(left<=0){ left=0; }else if(left>=this.offsetwidth-inner.offsetwidth){ left=this.offsetwidth-inner.offsetwidth } if(top<=0){ top=0; }else if(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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
上一篇: JavaScript轮播图简单制作方法
下一篇: js以及jquery实现手风琴效果