放大镜 - 码农教程

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         *{margin: 0;padding: 0;}
10         .box{width: 350px;height: 350px;margin: 100px;border: 1px solid black;position: relative;}
11         .big{width: 350px;height: 350px;position: absolute;top: 0;left: 360px;overflow: hidden;display: none}
12         .mask{width: 175px;height: 175px;background: rgba(255, 255, 0, 0.4);position: absolute;left: 0;top: 0;display: none;cursor: move;}
13         /* .small{position: relative;} */
14         .big img{position: absolute;}
15         /* img{display: block;} */
16 
17     </style>
18 </head>
19 <body>
20     <div class="box" id="box">
21         <div class="small" id="small" >
22             <img src="images/small.jpg" width="350" alt="" />
23             <div class="mask" id="mask"></div>
24         </div>
25         <div class="big" id="big" >
26             <img src="images/big.jpg" width="800" alt="" id="img" />
27         </div>
28     </div> 
29     <script>
30         //1 获取节点
31         var boxObj = document.getElementById('box');
32         var smallObj = document.getElementById('small');
33         var maskObj = document.getElementById('mask');
34         var bigObj = document.getElementById('big');
35         var imgObj = document.getElementById('img');
36         //2 鼠标移入移出事件
37         smallObj.onmouseenter = function(){
38             maskObj.style.display = 'block';
39             bigObj.style.display = 'block';
40         }
41         smallObj.onmouseleave = function(){
42             maskObj.style.display = 'none';
43             bigObj.style.display = 'none';
44         }
45         //3 黄色盒子在小图片中的位置
46         smallObj.onmousemove = function(eve){
47             var e = eve || window.event;
48             //mask 位置
49             var targetX = e.clientX - boxObj.offsetLeft - maskObj.offsetWidth/2;
50             var targetY = e.clientY - boxObj.offsetTop - maskObj.offsetHeight/2;
51             //限制边界
52             var maxX = smallObj.offsetWidth - maskObj.offsetWidth;
53             var maxY = smallObj.offsetHeight - maskObj.offsetHeight;
54             targetX = targetX < 0 ? 0 : targetX;
55             targetX = targetX > maxX ? maxX : targetX;
56             targetY = targetY < 0 ? 0 : targetY;
57             targetY = targetY > maxY ? maxY : targetY;
58             //mask 实时位置
59             mask.style.left = targetX + 'px';
60             mask.style.top = targetY + 'px';
61 
62             /*******大图的位置显示*******/ 
63             var imgX = targetX / maxX * (imgObj.offsetWidth - bigObj.offsetWidth);
64             var imgY = targetY / maxY * (imgObj.offsetHeight - bigObj.offsetHeight);
65             imgObj.style.left = -imgX + 'px';
66             imgObj.style.top = -imgY + 'px';
67         }
68     </script>
69 </body>
70 </html>
原文地址：https://www.cnblogs.com/zoutuan/p/11600762.html