html、css 、原生js实现放大镜功能I want to bring out the secrets of natu

I want to bring out the secrets of nature and apply them for the happiness of man . I don't know of any better service to offer for the short time we are in the world .
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>magnifier</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .big {
            outline: 1px solid red;
            width: 280px;
            height: auto;
            position: relative;
        }

        .big>img {
            width: 280px;
            height: auto;
        }

        .mask {
            display: none;
            width: 140px;
            height: 140px;
            background: pink;
            position: absolute;
            top: 0;
            left: 0;
            opacity: .5;
            cursor: move;
            outline: 1px solid rgb(95, 168, 228);
        }

        .bigright {
            display: none;
            width: 560px;
            height: 560px;
            outline: 5px solid yellow;
            position: absolute;
            left: 300px;
            top: 0;
            z-index: 999;
            overflow: hidden;
        }

        .bigright img {
            position: absolute;
            top: 0;
            left: 0;
            width: 1120px;
            height: auto;
        }

        .small>img {
            width: 70px;
            height: auto;
            float: left;
            outline: 1px solid rgb(211, 200, 200);
        }
    </style>
</head>

<body>
    <div class="big">
        <img src="./imgs/0.jpg" alt="">
        <div class="mask"></div>
        <div class="bigright">
            <img src="./imgs/0.jpg" alt="" class="brImg">
        </div>
    </div>
    <div class="small">
        <img src="./imgs/0.jpg" alt="#">
        <img src="./imgs/1.jpg" alt="#">
        <img src="./imgs/2.jpg" alt="#">
        <img src="./imgs/3.jpg" alt="#">
    </div>
    <script>
        var smallImgs = document.querySelectorAll('.small>img');
        var bigImg = document.querySelector('.big>img');
        var bigright = document.querySelector('.bigright>img');
        for (var i = 0; i < smallImgs.length; i++) {
            smallImgs[i].onclick = function () {
                bigImg.src = this.src;
                bigright.src = this.src;
            }
        }
        window.addEventListener('load', function () {
            var big = document.querySelector('.big');
            var mask = document.querySelector('.mask');
            var bigright = document.querySelector('.bigright');
            big.addEventListener('mouseover', function () {
                mask.style.display = 'block';
                bigright.style.display = 'block';
            })
            big.addEventListener('mouseout', function () {
                mask.style.display = 'none';
                bigright.style.display = 'none';
            })
            big.addEventListener('mousemove', function (e) {
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                // console.log(x,y);
                var maskX = x - mask.offsetWidth / 2;
                var maskY = y - mask.offsetHeight / 2;
                var maskMax = big.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 brImg = document.querySelector('.brImg');
                // console.log(brImg);
                var bigrightMax = brImg.offsetWidth - bigright.offsetWidth;
                var bigrightX = maskX * bigrightMax / maskMax;
                var bigrightY = maskY * bigrightMax / maskMax;
                brImg.style.left = -bigrightX + 'px';
                brImg.style.top = -bigrightY + 'px';
            })
        })
    </script>
</body>

</html>