JavaScript implements product details of e-commerce platform

<div class="box">
        <img src="images/s3.png" alt="">
        <div class="mask"></div>
        <div class="big">
            <img src="images/big.jpg" alt="">
        </div>
</div>

<style>
        * {
            padding: 0;
            margin: 0;
        }
 
        .box {
            position: relative;
            top: 70px;
            left: 30px;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
        }
        .box > img {
            height: 100%;
        }
 
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            box-sizing: border-box;
            background-color: rgba(254, 222, 79, .5);
            border: 1px solid #ccc;
            cursor: move;
            /*Change the mouse state to cross*/
        }
 
        .big {
            display: none;
            position: absolute;
            top: 0;
            left: 410px;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            overflow: hidden;
            z-index: 999;
        }
 
        .bigimg {
            /* Make sure to give the img under .big a positioning attribute so that its position can move with the movement of the mask layer*/
            position: absolute;
            top: 0;
            left: 0;
        }
</style>

<script>
        window.addEventListener('load', function () {
            // 1. Get the element var box = document.querySelector('.box');
            var mask = document.querySelector('.mask');
            var big = document.querySelector('.big');
 
            // 2. Register events // (1) When the mouse passes over the box, the mask layer and the large image on the right are displayed onmouseover  
            box.addEventListener('mouseover', function () {
                mask.style.display = 'block';
                big.style.display = 'block';
            })
            // (2) When the mouse leaves the box, the mask layer and the large image on the right are hidden.  
            box.addEventListener('mouseout', function () {
                mask.style.display = 'none';
                big.style.display = 'none';
            })
            // (3) Let the mask layer move with the mouse (this event should be written when the mouse is obtained)
            box.addEventListener('mousemove', function (e) {
                // (1). First calculate the coordinates of the mouse in the box. The coordinates of the mouse in the box = the coordinates of the mouse on the screen - offsetLeft/offsetTop of the box
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                // (2) The mouse should be in the center of the mask layer, so we need to move the mouse from the upper left corner of the mask layer to the right and downward by half the width and height of the mask layer, that is, the coordinates of the mouse in the box minus half the height and half the width of the box is the final left and top values ​​of our maskvar maskX = x - mask.offsetWidth / 2; // The mouse position is in the horizontal middle of the mask layervar maskY = y - mask.offsetHeight / 2; // The mouse position is in the vertical middle of the mask layer// (3) The horizontal movement distance of our mask layer, that is, maskX = the width of the parent box of the mask layer - the width of the mask layer, and the vertical movement distance of the mask layer, that is, maskY = the height of the parent box of the mask layer - the height of the mask layer// (4) If the x coordinate is less than 0, let it stop at 0// The maximum movement distance of the mask layer = the width of the parent box of the mask layer - the width of the mask layer (because the mask layer in this case is a square, the horizontal and vertical ranges are the same)
                var maskMax = box.offsetWidth - mask.offsetWidth; // Maximum moving distance of the mask layer // Determine and limit the movable range of the mask layer: Horizontal movable range:
                maskX <= 0 ? maskX = 0 : maskX = maskX; // Horizontal minimum movable range maskX >= maskMax ? maskX = maskMax : maskX = maskX; // Horizontal minimum movable range // Determine the movable range of the limited mask layer: Vertical movable range:
                maskY <= 0 ? maskY = 0 : maskY = maskY; // Minimum vertical movable range maskY >= maskMax ? maskY = maskMax : maskY = maskY; // Maximum vertical movable range // Give the mouse coordinate values ​​to the left and top of the mask (mask is positioned). Note that px units must be added! ! !
                mask.style.left = maskX + 'px';
                mask.style.top = maskY + 'px';
                // (5) Let the large image on the right move with the mask layer // Large image moving distance = mask layer moving distance * large image maximum moving distance / mask layer maximum moving distance // Get the large image var bigImg = big.querySelector('img');
                // Maximum moving distance of large picture var bigMax = bigImg.offsetWidth - big.offsetWidth;
                // Moving distance XY of the large image
                var bigX = maskX * bigMax / maskMax;
                var bigY = maskY * bigMax / maskMax;
                // Note: 1. The element obtained by bigImg needs to have CSS positioning attributes to move the position. Without positioning, the position will not change. // 2. The movement of the big image and the mask layer are in the opposite direction, because when the mask layer moves to the left, the big image actually moves to the right, so the value is a negative number bigImg.style.left = -bigX + 'px';
                bigImg.style.top = -bigY + 'px';
            })
 
        })
</script>