js实现放大镜效果

现在很多网站上都用到了放大镜的效果，尤其是购物网站。下面就看看怎么实现吧
  1 <!doctype html>
  2 <html>
  3 
  4 <head>
  5   <meta charset="UTF-8">
  6   <title>放大镜</title>
  7   <style>
  8     * {
  9       margin: 0;
 10       padding: 0
 11     }
 12 
 13     #demo {
 14       display: block;
 15        400px;
 16       height: 586px;
 17       margin: 50px;
 18       position: relative;
 19     }
 20 
 21     #small-box {
 22       position: relative;
 23       z-index: 1;
 24     }
 25 
 26     #small-box img {
 27        400px;
 28       height: 586px;
 29     }
 30 
 31     #float-box {
 32       display: none;
 33        120px;
 34       height: 120px;
 35       position: absolute;
 36       background: #dcf4ff;
 37       border: 1px solid #ccc;
 38       filter: alpha(opacity=50);
 39       opacity: 0.5;
 40     }
 41 
 42     #mark {
 43       position: absolute;
 44       display: block;
 45        400px;
 46       height: 586px;
 47       background-color: #fff;
 48       filter: alpha(opacity=0);
 49       opacity: 0;
 50       z-index: 10;
 51     }
 52 
 53     #big-box {
 54       display: none;
 55       position: absolute;
 56       top: 0;
 57       left: 460px;
 58        400px;
 59       height: 400px;
 60       overflow: hidden;
 61       border: 1px solid #ccc;
 62       z-index: 1;
 63       ;
 64     }
 65 
 66     #big-box img {
 67       position: absolute;
 68       z-index: 5
 69     }
 70   </style>
 71   <script>
 72     //页面加载完毕后执行
 73     window.onload = function () {
 74 
 75       //获取需要的标签
 76       let objDemo = document.getElementById("demo");
 77       let objSmallBox = document.getElementById("small-box");
 78       let objMark = document.getElementById("mark");
 79       let objFloatBox = document.getElementById("float-box");
 80       let objBigBox = document.getElementById("big-box");
 81       let objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
 82 
 83       //鼠标悬浮时，浮块和右侧放大镜显示
 84       objMark.onmouseover = function () {
 85         objFloatBox.style.display = "block"
 86         objBigBox.style.display = "block"
 87       }
 88       //鼠标离开后，浮块和右侧放大镜隐藏
 89       objMark.onmouseout = function () {
 90         objFloatBox.style.display = "none"
 91         objBigBox.style.display = "none"
 92       }
 93 
 94       //鼠标在遮罩层移动时
 95       objMark.onmousemove = function (ev) {
 96 
 97         let _event = ev || window.event; //兼容多个浏览器的event参数模式
 98         // console.log(_event.clientX);//鼠标到屏幕左侧的距离
 99         // console.log(objDemo.offsetLeft);//外框到屏幕左侧的距离，因为它的父元素为body
100         // console.log(objSmallBox.offsetLeft);//小盒子的margin
101         // console.log(objFloatBox.offsetWidth);//浮块的宽度
102 
103         let left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
104         let top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
105 
106         //设置边界处理，防止移出小图片
107         if (left < 0) {
108           left = 0;
109         } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
110           left = objMark.offsetWidth - objFloatBox.offsetWidth;
111         }
112 
113         if (top < 0) {
114           top = 0;
115         } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
116           top = objMark.offsetHeight - objFloatBox.offsetHeight;
117 
118         }
119 
120         objFloatBox.style.left = left + "px"; //oSmall.offsetLeft的值是相对什么而言
121         objFloatBox.style.top = top + "px";
122 
123         //求其比值
124         let percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
125         let percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
126 
127         //方向相反，小图片鼠标移动方向与大图片相反，故而是负值
128         objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
129         objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
130       }
131     }
132   </script>
133 </head>
134 
135 <body>
136   <div id="demo">
137     <div id="small-box">
138       <div id="mark"></div>
139       <div id="float-box"></div>
140       <img src="timg.jpg" />
141     </div>
142     <div id="big-box">
143       <img src="timg.jpg" />
144     </div>
145   </div>
146 </body>
147 
148 </html>