CSS部分

 <style>
        * {
            margin: 0;
            padding: 0
        }

        .samllbox {
            width: 200px;
            height: 200px;
            position: relative;
            margin-left: 50px;
            margin-top: 100px;
        }

        .samllbox img {
            width: 200px;
            height: 200px;
        }

        .mask {
            position: absolute;
            width: 100px;
            height: 100px;
            left: 0;
            top: 0;
            background-color: rgb(225, 0, 0, .4)
        }

        .bigimgbox {
            position: absolute;
            width: 400px;
            height: 400px;
            left: 30%;
            top: 100px;
            overflow: hidden;
        }

        .bigimgbox img {
            width: 800px;
            height: 800px; left: 0; top: 0;
            position: absolute;
        }
    </style>

html部分

 <div class="samllbox">
        <div class="mask" style="display: none"></div>
        <img src="01.jpg" alt="">
    </div>
    <div class="bigimgbox" style="display: none">
        <img src="01.jpg" alt="" class="bigimg">
    </div>

js部分

        window.addEventListener("load", function () {
            var samllbox = document.querySelector(".samllbox");

            var mask = document.querySelector(".mask");
            var bigimgbox = document.querySelector(".bigimgbox");
            var bigimg = document.querySelector(".bigimg");

            samllbox.addEventListener("mouseover", function () {

                mask.style.display = "block";
                bigimgbox.style.display = "block";
                samllbox.addEventListener("mousemove", function (e) {
                    var top = e.clientY - samllbox.offsetTop;
                    var left = e.clientX - samllbox.offsetLeft;

                    if (left < 50) { left = 50; }
                    if (left > 150) {left = 150;}
                    if (top < 50) { top = 50; }
                    if (top > 150) {top = 150;}
                    mask.style.left = left - mask.offsetWidth / 2 + "px";
                    mask.style.top = top - mask.offsetWidth / 2 + "px";

                    bigimg.style.left = -(left - mask.offsetWidth / 2)*4 + "px";
                    bigimg.style.top = -(top - mask.offsetWidth / 2)*4 + "px";
           });

            });
            samllbox.addEventListener("mouseout", function () {
                mask.style.display = "none";
                bigimgbox.style.display = "none";
            })
        })