JavaScript to achieve a simple magnifying glass effect

There is a picture in a big box. When you put the mouse on it, a semi-transparent mask layer will appear. When you move the mouse, the mask layer moves with it. There is also an enlarged picture next to the box. The position of the enlarged picture changes with the position of the mask layer. When the mouse leaves the big box, the mask layer and the enlarged picture disappear.

Implementation ideas

1. Edit the box, mask layer, and enlarged image page in html and css, and set the mask layer and enlarged image to be hidden by default
2. Get the element object, bind the mouse event mouseover to the big box, set the mask layer and enlarged image display when the mouse passes over: set display to 'block'
Mouse out - - -mouseout, set the mask layer and magnified image display when the mouse passes over: display is set to 'none'
3. Calculate the position of the mouse in the big box
4. Place the mouse in the middle of the mask layer: Move the mask layer half the distance upward and left relative to the mouse position. Position the mask layer - - - Absolutely position it, assigning an upward and left offset relative to the box.
5. Limit the movement of the mask layer in the big box - - - Determine the value of the offset. When <= 0, the offset is 0
6. The position of the enlarged image changes as the mask layer moves. Mask layer movement value / mask layer maximum movement distance = enlarged image movement distance / enlarged image maximum movement distance. According to this relationship, the movement distance of the enlarged image is obtained. The movement distance is assigned to the offset top and left of the enlarged image.

Note: The offset of the enlarged image is given a negative value, which is opposite to the direction of movement of the mask layer.

Code Sample

<!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>Mobile phone details page</title>
    <!-- <link rel="stylesheet" href="css/detail.css" >
    <script src="js/detail.js"></script> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .detail-content {
            width: 1200px;
            margin: 0 auto;
        }
        
        img {
            border: 0;
            vertical-align: middle;
        }
        
        .preview_img {
            position: relative;
            width: 400px;
            height: 400px;
            margin-top: 30px;
            border: 1px solid #ccc;
        }
        
        .preview_img img {
            width: 100%;
            height: 100%;
        }
        
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background-color: pink;
            opacity: .5;
            cursor: move;
        }
        
        .big {
            display: none;
            position: absolute;
            top: 0;
            left: 410px;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            background-color: pink;
            z-index: 999;
            overflow: hidden;
        }
        
        .bigimg {
            position: absolute;
            top: 0;
            left: 0;
            width: 800px;
            height: 800px;
        }
    </style>
</head>

<body>
    <div class="detail-content">
        <div class="preview_img">
            <img src="upload/s3.png" alt="">
            <div class="mask"></div>
            <div class="big">
                <img src="upload/big.jpg" alt="" class="bigImg">
            </div>
        </div>
    </div>

    <script>
        var previewImg = document.querySelector('.preview_img');
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.big');
        var bigImg = document.querySelector('.bigImg');

        // Mouse over box event previewImg.addEventListener('mouseover', function() {
            // Set the occlusion layer and magnified image display mask.style.display = 'block';
            big.style.display = 'block';
        })

        // Mouse leaves the box event previewImg.addEventListener('mouseout', function() {
            // Set the occlusion layer and the enlarged image to hide mask.style.display = 'none';
            big.style.display = 'none';
        })

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

            // Calculate the movement value of the occlusion layer and put the mouse in the middle of the occlusion layer var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;

            // The box is a square, so only the maximum horizontal X-axis movement value is calculated. The maximum Y-axis movement value is consistent with the X-axis var maskMax = previewImg.offsetWidth - mask.offsetWidth;

            // Limit the occlusion layer to move within the box 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';

            // Calculate the maximum movement value of the enlarged image, the horizontal movement value of the large image = the movement value of the occlusion layer * the maximum movement distance of the large image / the maximum movement distance of the occlusion layer var bigMax = bigImg.offsetWidth - big.offsetWidth;

            var bigX = maskX * bigMax / maskMax;
            var bigY = maskY * bigMax / maskMax;

            bigImg.style.left = -bigX + 'px';
            bigImg.style.top = -bigY + 'px';

        })
    </script>
</body>

</html>

Page effect:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: