原生js实现放大镜

2019-11-19 17:29:32

字体：大中小

来源：转载

供稿：网友

原理：左边阴影在左边图片上从左到右移动的时候，右边大框也在右边大图片上从左到右移动（尽管在视觉、原理和代码上是相反的）；所谓放大，其实就是一张原本就很小的图对应一张原本就很大的图。

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：Ajax异步获取html数据中包含js方法无效的解决方法

下一篇：jQuery实现单击按钮遮罩弹出对话框效果（2）