Realize the principle of

Prepare a small picture and a large picture, store the small picture and large picture container, there is a translucent mask layer; When the mouse moves over a small picture, it can locate the corresponding position of a large picture by capturing the position of the mouse on the small picture. The moving direction of the magnifying glass and the moving direction of the large picture: horizontal and vertical are opposite, to ensure synchronization;

Function realization effect diagram is as follows:

Put the mouse on the translucent mask layer and a large picture to show the effect:

The code is as follows:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Picture magnifier</title>
    <style>
        * {
            padding: 0;
            margin: 0; } // Container layout.box {
            position: relative;
            top: 200px;
            left: 200px;
            width: 450px;
            height: 450px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid # 000; } // Semi-transparent mask layer.mask {
            display: none;
            font-style: normal;
            position: absolute;
            left: 0;
            top: 0;
            width: 220px;
            height: 220px;
            background-color: goldenrod;
            opacity: 0.5;
            cursor: move; } // Big picture box.big {
            display: none;
            overflow: hidden;
            position: absolute;
            top: -25px;
            left: 450px;
            width: 500px;
            height: 500px;
            margin-left: 15px;
            border: 1px solid # 000; } // Set the large image to absolute position (otherwise the image movement effect will not work).bigImg {
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src=".. /images/small.jpg" class="small">
        <i class="mask"></i>
        <div class="big">
            <img src=".. /images/bigImg.jpg" class="bigImg">
        </div>
    </div>

    <script>
    	// Get the element
        var box = document.querySelector('.box');
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.big');
        var bigImg = document.querySelector('.bigImg');
		
        box.addEventListener('mouseenter'.function () {
            mask.style.display = 'block';
            big.style.display = 'block';

            box.addEventListener('mousemove'.function (e) {
                // Get the mouse position in the box
                var x = e.pageX - box.offsetLeft;
                var y = e.pageY - box.offsetTop;

                Assign the mouse position in the box to the mask layer and position the mouse in the middle of the box
                maskX = x - mask.offsetWidth / 2;
                maskY = y - mask.offsetHeight / 2;

                // The maximum movement distance of the mask layer
                maskMax = box.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';

                // The large image moves proportionally to the mask layer
                // Mask layer movement distance/mask layer maximum movement distance = large image movement distance/large image maximum movement distance
                bigImgMax = bigImg.offsetWidth - big.offsetWidth;
                bigImgX = maskX * bigImgMax / maskMax;
                bigImgY = maskY * bigImgMax / maskMax;
                
                // The big picture moves in the opposite direction
                bigImg.style.left = -bigImgX + 'px';
                bigImg.style.top = -bigImgY + 'px'; })})// Mouse away from the small image box mask layer, large image hidden do not show
        box.addEventListener('mouseleave'.function () {
            mask.style.display = 'none';
            big.style.display = 'none';
        })
    </script>
</body>
</html>
Copy the code