JS 仿京东放大镜

 1 body{
 2             margin: 0;
 3         }
 4         .box {
 5             width: 1210px;
 6             position: relative;
 7             background-color: pink;
 8             margin: 0 auto;
 9         }
10 
11         .content {
12             width: 452px;
13             height: 568px;
14             border: 1px solid #eee;
15         }
16 
17         .mask {
18             display: none;
19             width: 200px;
20             height: 200px;
21             position: absolute;
22             top: 0;
23             left: 0;
24             background-color: #FEDE4F;
25             opacity: 0.5;
26             cursor: move;
27         }
28 
29         .big {
30             display: none;
31             position: absolute;
32             left: 453px;
33             top: 0;
34             width: 500px;
35             height: 570px;
36             background-color: rgb(192, 173, 173);
37             z-index: 999;
38             border: 1px solid #eee;
39             overflow: hidden;
40         }
41         .big img{
42             position: absolute;
43             top: 0;
44             left: 0;
45         }

1     <div class="box">
2         <div class="content">
3             <img src="../imges/p40.jpg" alt="">
4             <div class="mask"></div>
5             <div class="big"><img src="../imges/p40pro.jpg" alt="" id="bigImg"></div>
6         </div>
7     </div>

 1  window.addEventListener(‘load‘, function () {
 2             var content = document.querySelector(‘.content‘)
 3             var mask = document.querySelector(‘.mask‘)
 4             var big = document.querySelector(‘.big‘)
 5             var box = document.querySelector(‘.box‘)
 6             // 当鼠标进入盒子里面就显示mask和big
 7             content.addEventListener(‘mouseover‘, function () {
 8                 mask.style.display = ‘block‘
 9                 big.style.display = ‘block‘
10             })
11             content.addEventListener(‘mouseout‘, function () {
12                 mask.style.display = ‘none‘
13                 big.style.display = ‘none‘
14             })
15             // 鼠标移动的时候黄色背景层跟着移动
16             content.addEventListener(‘mousemove‘, function (e) {
17                 var x = e.pageX - box.offsetLeft;
18                 var y = e.pageY - box.offsetTop;
19                 // mask移动的距离
20                 var maskX = x - mask.offsetWidth / 2;
21                 var maskY = y - mask.offsetWidth / 2;
22 
23                 // 黄色背景图层最大移动距离
24                 var maskMax = content.offsetWidth - mask.offsetWidth;
25                 if (maskX <= 0) {
26                     maskX = 0
27                 } else if (maskX >= maskMax) {
28                     maskX = maskMax;
29                 }
30                 if (maskY <= 0) {
31                     maskY = 0;
32                 } else if (maskY >= maskMax) {
33                     maskY = maskMax;
34                 }
35                 mask.style.left = maskX + ‘px‘
36                 mask.style.top = maskY + ‘px‘
37                 // 大图片的移动距离 = 黄色背景图层移动距离 * 大图片最大移动距离 / 黄色背景图层最大移动距离
38                 var bigImg = document.querySelector(‘#bigImg‘)
39                 var bigMax = bigImg.offsetWidth - big.offsetWidth;
40                 // 大图片的移动距离
41                 var bigX = maskX * bigMax / maskMax;
42                 var bigY = maskY * bigMax / maskMax;
43                 bigImg.style.left = -bigX + ‘px‘;
44                 bigImg.style.top = -bigY + ‘px‘;
45             })
46         })