JavaScript imitates Jingdong magnifying glass effect

This article shares the specific code for JavaScript to achieve the Jingdong magnifying glass effect for your reference. The specific content is as follows

Case Study

The entire case can be divided into three functional modules
When the mouse passes over the small picture box, the yellow mask layer and the large picture box are displayed, and the function of hiding the two boxes is left.
The yellow occlusion layer follows the mouse function.
Move the yellow masking layer and the large image will follow the movement.
When the mouse passes over the small picture box, the yellow mask layer and the large picture box are displayed, and the function of hiding the two boxes is left.
Show and hide

Move the yellow occlusion layer, and the large image will follow the movement. The moving distance of the large image should be equal to the ratio of the yellow occlusion layer.
Find the formula for moving the large image

Code

<!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>Document</title>
    <style>
        .preview_wrap {
            width: 400px;
            height: 400px;
        }

        .preview_img {
            position: relative;
            height: 398px;
            border: 1px solid #ccc;
        }

        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background: #FEDE4F;
            opacity: .5;
            border: 1px solid #ccc;
            cursor: move;
        }

        .big {
            display: none;
            position: absolute;
            left: 410px;
            top: 0;
            width: 500px;
            height: 500px;
            background-color: pink;
            z-index: 999;
            border: 1px solid #ccc;
            overflow: hidden;
        }

  /* You need to add absolute positioning to the image before you can set left top */
        .bigimg {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="preview_wrap">
        <div class="preview_img">
            <img src="images/s3.png" alt="">
            <div class="mask"></div>
            <div class="big">
                <img src="images/big.jpg" alt="" class="bigImg">
            </div>
        </div>
    </div>
    <script>
     var preview_img = document.querySelector('.preview_img');
     var mask = document.querySelector('.mask');
     var big = document.querySelector('.big');
     // 1. When our mouse passes over preview_img, we show and hide the mask layer and the big box preview_img.addEventListener('mouseover', function() {
         mask.style.display = 'block';
         big.style.display = 'block';
     })
     preview_img.addEventListener('mouseout', function() {
             mask.style.display = 'none';
             big.style.display = 'none';
         })
         // 2. When the mouse moves, let the yellow box follow the mouse preview_img.addEventListener('mousemove', function(e) {
         // (1). First calculate the coordinates of the mouse in the box var x = e.pageX - this.offsetLeft;
         var y = e.pageY - this.offsetTop;
         // console.log(x, y);
         // (2) Subtract half of the box height 300 to get 150, which is the final left and top values of our mask // (3) The distance our mask moves var maskX = x - mask.offsetWidth / 2;
         var maskY = y - mask.offsetHeight / 2;
         // (4) If the x coordinate is less than 0, let it stop at 0 // Maximum moving distance of the occlusion layer var maskMax = preview_img.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';
         // 3. Moving distance of big picture = moving distance of occluding layer * maximum moving distance of big picture / maximum moving distance of occluding layer // Big picture var bigIMg = document.querySelector('.bigImg');
         // Maximum moving distance of large image var bigMax = bigIMg.offsetWidth - big.offsetWidth;
         // Moving distance XY of the large image
         var bigX = maskX * bigMax / maskMax;
         var bigY = maskY * bigMax / maskMax;
         bigIMg.style.left = bigX + 'px';
         bigIMg.style.top = bigY + 'px';
 
     })
    </script>
</body>
</html>

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: