Use native JavaScript to achieve magnifying glass effects

<div class="outer"
    <!-- Picture box box1 -->
    <div class="box">
        <img src="./" alt="">
        <!-- Mask layer -->
        <div class="mask"></div>
    </div>
    <!-- Zoom in the box -->
    <div class="box2"></div>
</div>

.outer {
    display: flex;
}
.box {
    /* Can change the width and height here */
    width: 400px;
    height: 400px;
    background: green;
    position: relative;
    margin-left: 100px;
}
.box img {
    width: 100%;
    height: 100%;
}
.box2 {
    /* Can change the width and height here */
    width: 600px;
    height: 600px;
    background-image: url(./);
    background-repeat: no-repeat;
    background-size: 400% 400%;
    display: none;
    margin-left: 20px;
}
.mask {
    /* Can change the width and height here */
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, .5);
    display: none;
    position: absolute;
}

        // Get the elements of three boxes        const mask = ('.mask')
        const box1 = ('.box')
        const box2 = ('.box2')

        // Function: Display and hide the mask layer and enlarge box        ('mouseenter', () => {
             = 'block'
             = 'block'
        })
        ('mouseleave', () => {
             = 'none'
             = 'none'
        })

        // Move the mouse into the box        ('mousemove', (e) => {
            // Get the mouse in the x-axis position of the current viewable window            // ().left Get the position on the left of the current box (range: viewable window)            // Location from top
            // The reason for subtracting a distance from the top is that the getBoundingClientRect method is relative to the viewable window.            // If our current element appears in the scrollbar, subtract one of its scrollbar height so that it will not be misaligned.            let x =  - ().left - 
            let y =  - ().top -   // Subtract the distance from the top of the box position
            // Specify that the mask layer moves in the current parent box            if (x >= 0 && x <=  && y >= 0 && y <= ) {

                // Initialize the movable positions of x and y                let mx = 0
                let my = 0

                // ------------------------------------------------------------------------------------------------------------------------------                let maskWidth = 
                let maskWidthHalf =  / 2
                let currentBoxWidth = 

                let maskHeight = 
                let maskHeightHalf =  / 2
                let currentBoxHeight = 

                // Process the x part                // It cannot be moved within [mask itself half]                if (x < maskWidthHalf) mx = 0
                // Only if you can move it in the [box - half of the mask] section                if (x >= maskWidthHalf && x <= currentBoxWidth - maskWidthHalf) mx = x - maskWidthHalf
                // Arrive [Box - Mask Half] and can't move any more                if (x > currentBoxWidth - maskWidthHalf) mx = currentBoxWidth - maskWidth

                // Handle the y part (same)                if (y < maskHeightHalf) my = 0
                if (y >= maskHeightHalf && y <= currentBoxHeight - maskHeightHalf) my = y - maskHeightHalf
                if (y > currentBoxHeight - maskHeightHalf) my = currentBoxHeight - maskHeight

                // Let the mask layer move                 = mx + 'px'
                 = my + 'px'

                // --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------                // 1. Multiple of background magnification == Width of box 1 / Width of cover layer                let scaleWidth = ( / ) * 100
                let scaleHeight = ( / ) * 100
                 =
                    `${scaleWidth + '%'} ${scaleHeight + '%'}`
                    
                (scaleWidth, 'Magnification');

                // 2. Number of steps to walk = enlarge box width / cover layer width                let stepWidth = ( / )
                let stepHeight = ( / )
                
                // Add a negative sign here because it needs to move from the opposite direction, while the positive number moves to the right                 = -stepWidth * mx + 'px'
                 = -stepHeight * my + 'px'
                
                (mx, 'box1Total movable distance = box1Width - 遮罩层Width');
                (stepWidth, 'Walking multiples(Step count) = box2Width / maskWidth ');
                (-stepWidth * mx, 'Total movable distance * Number of walking steps; indicates the distance used by the mask layer to end from one side to the other');
            }
        })