使用js实现放大镜

html

   <div id="detail_box">
        <!-- previw_box    left-->
        <div class="previw_box">
            <!--previw  -->
            <div class="previw">
                <!-- small_pic -->
                <div class="small_pic">
                    <img src="./images/small_img.jpg" alt="">
                    <div class="mask"></div>
                </div>
                <!-- big_pic -->
                <div class="big_pic">
                    <img src="./images/big-img.jpg" alt="">
                </div>
            </div>
            <!--bot_pic  -->
            <div class="bot_pic"></div>
        </div>
        <!-- right -->
        <div class="right"></div>
    </div>

css

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #detail_box {
            width: 1200px;
            height: 550px;
            background-color: aqua;
            margin: 20px auto;
        }

        /* ---------- */
        .previw_box {
            width: 450px;
            height: 550px;
            float: left;

        }

        .previw_box .previw {
            width: 450px;
            height: 450px;
            border: 1px solid #666;
            position: relative;
        }

        .previw_box .previw .small_pic img {
            width: 100%;
            height: 100%;
        }

        .previw_box .previw .mask {
            width: 300px;
            height: 300px;
            background-color: #FFEEA7;
            opacity: 0.8;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .big_pic {
            width: 540px;
            height: 540px;
            border: 1px solid #333;
            overflow: hidden;
            position: absolute;
            left: 450px;
            top: 0;
            display: none;
        }

        .big_pic img {
            /* 注意  大图需要定位 */
            position: absolute;
            left:0;
            top: 0;
        }

        /* ------- */

        .bot_pic {
            width: 100%;
            height: 100px;
            background-color: chartreuse;
        }

        .right {
            width: 750px;
            height: 550px;
            background-color: red;
            opacity: 1;
            float: right;

        }
    </style>

js

 <script>
        //1.功能一： 鼠标经过previw 区  让 mask 和 big_pic显示，移开隐藏
        var previw = document.querySelector('.previw');
        var mask = document.querySelector('.mask');
        var big_pic = document.querySelector('.big_pic');

        previw.onmouseenter = function () {
            mask.style.display = "block";
            big_pic.style.display = "block"

        }
        previw.onmouseleave = function () {
            mask.style.display = "none";
            big_pic.style.display = "none"

        }

        //2.功能二  ，mask跟着鼠标在移动  （在盒子内移）previw 区

        previw.onmousemove = function (e) {
            // 鼠标在盒子内的坐标
            var x = e.pageX - previw.offsetLeft;
            var y = e.pageY - previw.offsetTop;
            console.log(x, y);

            //此坐标赋值 mask的left 和top   maskX  mask移动的距离
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetWidth / 2


            //mask最大的移动距离是 previw.offsetWidth-mask.offsetWidth  最小的距离 0
            var maskMax = previw.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';
// -------------------------------------------------------------

  //大图跟着 mask 同步移动
  //大图最大的移动距离
  var big_pic= document.querySelector('.big_pic');
  var bigimg=   document.querySelector('.big_pic img')

   var bigpicMax= big_pic.offsetWidth-bigimg.offsetWidth;

    bigimg.style.left=maskX*bigpicMax/maskMax+'px';
    bigimg.style.top=maskY*bigpicMax/maskMax+'px';



    /* 
        maskX                      ?
    ----------------------=------------------------
        maskMax                     bigpicMax
    
    */



}

    </script>

效果图