JS 仿京东放大镜

css代码

 body{
             margin:;
         }
         .box {
             width: 1210px;
             position: relative;
             background-color: pink;
             margin: 0 auto;
         }

         .content {
             width: 452px;
             height: 568px;
             border: 1px solid #eee;
         }

         .mask {
             display: none;
             width: 200px;
             height: 200px;
             position: absolute;
             top:;
             left:;
             background-color: #FEDE4F;
             opacity: 0.5;
             cursor: move;
         }

         .big {
             display: none;
             position: absolute;
             left: 453px;
             top:;
             width: 500px;
             height: 570px;
             background-color: rgb(192, 173, 173);
             z-index:;
             border: 1px solid #eee;
             overflow: hidden;
         }
         .big img{
             position: absolute;
             top:;
             left:;
         }

     <div class="box">
         <div class="content">
             <img src="../imges/p40.jpg" alt="">
             <div class="mask"></div>
             <div class="big"><img src="../imges/p40pro.jpg" alt="" id="bigImg"></div>
         </div>
     </div>

JS代码

  window.addEventListener('load', function () {
             var content = document.querySelector('.content')
             var mask = document.querySelector('.mask')
             var big = document.querySelector('.big')
             var box = document.querySelector('.box')
             // 当鼠标进入盒子里面就显示mask和big
             content.addEventListener('mouseover', function () {
                 mask.style.display = 'block'
                 big.style.display = 'block'
             })
             content.addEventListener('mouseout', function () {
                 mask.style.display = 'none'
                 big.style.display = 'none'
             })
             // 鼠标移动的时候黄色背景层跟着移动
             content.addEventListener('mousemove', function (e) {
                 var x = e.pageX - box.offsetLeft;
                 var y = e.pageY - box.offsetTop;
                 // mask移动的距离
                 var maskX = x - mask.offsetWidth / 2;
                 var maskY = y - mask.offsetWidth / 2;

                 // 黄色背景图层最大移动距离
                 var maskMax = content.offsetWidth - mask.offsetWidth;
                 if (maskX <= 0) {
                     maskX = 0
                 } else if (maskX >= maskMax) {
                     maskX = maskMax;
                 }
                 if (maskY <= 0) {
                     maskY = 0;
                 } else if (maskY >= maskMax) {
                     maskY = maskMax;
                 }
                 mask.style.left = maskX + 'px'
                 mask.style.top = maskY + 'px'
                 // 大图片的移动距离 = 黄色背景图层移动距离 * 大图片最大移动距离 / 黄色背景图层最大移动距离
                 var bigImg = document.querySelector('#bigImg')
                 var bigMax = bigImg.offsetWidth - big.offsetWidth;
                 // 大图片的移动距离
                 var bigX = maskX * bigMax / maskMax;
                 var bigY = maskY * bigMax / maskMax;
                 bigImg.style.left = -bigX + 'px';
                 bigImg.style.top = -bigY + 'px';
             })
         })

效果图