简易的js原生放大镜代码

Posted 2020-06-25

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简易的js原生放大镜代码相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
   #obj{ float: left; width: 200px; height: 200px; position:relative; }

   #obj img{ width: 200px; height: 200px; display: block; }

   #darg{ width: 100px; height: 100px; background: yellow; position: absolute; left: 0px; top: 0px; opacity: 0.4;
       cursor: move; display: none;}

   #rightShow{ float: left; width: 400px; height: 400px; overflow: hidden; display: none; }

   #rightShow img{ width: 800px; height: 800px; }
   </style>
   <script type="text/javascript">
       window.onload=function(){
           var obj = document.getElementById(‘obj‘);
           var leftImg = document.getElementById(‘leftImg‘);
           var darg = document.getElementById(‘darg‘);
           var rightShow = document.getElementById(‘rightShow‘);
           var rightImg = document.getElementById(‘rightImg‘);

           obj.onmousemove=function(e){   //当鼠标在obj上面移动的事件

               var e = e || window.event; //获取时间对象并且做兼容处理

               darg.style.display=‘block‘; //模拟放大镜的图标显示
               rightShow.style.display=‘block‘; //放大镜的区域显示

               var lefts = e.clientX - obj.offsetLeft - darg.offsetWidth/2;
               //移动时鼠标距离浏览器左侧距离   减去 obj距离浏览器的左侧距离减去放大镜图标实际宽度（包括边线等）的一半
               //就是obj内部放大镜图标距离obj内边的左侧距离
               var tops = e.clientY - obj.offsetTop - darg.offsetHeight/2;
               //移动时鼠标距离浏览器顶部距离   减去 obj距离浏览器的顶部距离减去放大镜图标实际高度的一半
               //就是obj内部放大镜图标距离obj内边的顶部距离
               var maxmoveX = obj.clientWidth - darg.offsetWidth;
               //移动时 obj的可视宽度（不包括边线滚动条等）减去 darg放大镜图标的实际宽度
               //就是obj内部减去放大镜剩余的宽度也就是可以左右移动的距离
               var maxmoveY = obj.clientHeight - darg.offsetHeight;
               //移动时 obj的可视高度减去 darg放大镜图标的实际高度度
               //移动obj内部减去放大镜剩余的高度也就是可以上下移动的距离

               if(lefts > maxmoveX){ //如果移动的距离超过可以左右移动的距离就把可以移动的距离赋值防止放大镜溢出obj右侧
                   lefts = maxmoveX;
               }

               if(tops > maxmoveY){ //如果移动的距离超过可以上下移动的距离就把可以移动的距离赋值防止放大镜溢出obj下方
                   tops = maxmoveY;
               }

               if(lefts < 0){ //如果移动的左距离小于0了就把0赋给移动的距离防止放大镜溢出obj 左侧
                   lefts = 0;
               }

               if(tops < 0){ //如果移动的上距离小于0了就把0赋值给移动的距离防止放大镜溢出obj 上侧
                   tops = 0;
               }

               darg.style.left = lefts + ‘px‘; //把鼠标移动的左右距离赋值给放大镜让放大镜跟着移动
               darg.style.top = tops + ‘px‘;   //把鼠标移动的上下距离赋值给放大镜让放大镜跟着移动

               var num = rightImg.offsetWidth/leftImg.offsetWidth;
               //大的图片除以小的图片得到要放大的倍数
               rightShow.scrollLeft = darg.offsetLeft * num;
               //把放大镜距离左侧的距离乘以倍数然后赋值给包含大图片的那个元素（对象）
               //那么这个元素内部就应该有距离左侧的scrollLeft值但是因为溢出隐藏了所以滚动条不显示就隐藏了
               rightShow.scrollTop = darg.offsetTop * num;
               //把放大镜距离上侧的距离乘以倍数然后赋值给包含大图片的那个元素（对象）
               //那么这个元素内部就应该有距离左侧的scrollTop值但是因为溢出隐藏了所以滚动条不显示就隐藏了
           }

           obj.onmouseout=function(){

               darg.style.display=‘none‘;
               rightShow.style.display=‘none‘;
               //鼠标溢出obj时隐藏
           }

       };
   </script>
</head>
<body>
   <div id="obj">
       <img id="leftImg" src="images/tablist01.jpg" title=" " />
       <div id="darg"></div>
   </div>

   <div id="rightShow" class="all"><img id="rightImg" src="images/tablist01.jpg" title=" " /></div>
</body>
</html>

以上是关于简易的js原生放大镜代码的主要内容，如果未能解决你的问题，请参考以下文章