Implementation process of the magnifying glass effect in the Javascript example project

Preface

The promissory note blog mainly contains magnifying glass cases, and the knowledge points involved will be presented. You can read it with confidence. There is source code at the end.

Case: Imitation of JD.com magnifying glass effect

The effect is shown in the figure below:

Feature Request:

• When the mouse moves over the small picture, a mask layer appears, and a large picture also appears next to it. When the mouse moves out, the mask layer disappears, and the large picture also disappears.
• The mask layer can only be moved within the small box and cannot be moved outside.
• The mask moves in the small box, and the large image shows the corresponding plate.

Case Study:

• Hiding and showing elements
• The moving range of the mask layer is calculated using offset
• Calculate the distance moved inside the big box

Example code:

First of all, we should build the structure, which is roughly as follows:

After writing the styles of all the boxes, hide the blue mask layer box and the box on the right containing the large red picture. Note that the purple box is relatively positioned, and all boxes are positioned based on the purple box.

The code is as follows:

<div class="box">
        <img src="./image/pic1.jpg" alt="" class="box_pic">
        <div class="mask"></div>
        <div class="big">
            <img src="./image/bigimg.jpg" alt="" class="bigImg">
        </div>
</div>

After construction, we add mouse movement events to this box. When the mouse moves to the box, the mask box and the big box appear. When the mouse moves out, the mask box and the big box disappear.

The code is as follows:

  var pic = document.querySelector('.box');
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.big');
        //appear and disappear pic.addEventListener('mouseenter', function () {
            mask.style.display = 'block';
            big.style.display = 'block';
        })
        pic.addEventListener('mouseleave', function () {
            mask.style.display = 'none';
            big.style.display = 'none';
        })

Next we need to calculate the distance the mask layer can move.

As can be seen from the above figure, because we require that the mask layer cannot exceed the range of the small box, the distance that the mask layer can move within the small box is only the width of the small box minus the width of the mask layer box. At this time, we use the attributes in offset.

Offset Series

Use the offset series of related properties to dynamically obtain the position (offset), size, etc. of the element

Offset series properties:

Note: The offset series only has offsetTop and offsetLeft! ! ! The returned value is unitless.

Comparison: offset and style attributes

offset

styleoffset can get the style value in any style sheet, style can only get the style value in the inline style sheet

The values ​​obtained by the offset series are unitless.

style.width gets a string with units offsetWidth includes padding+border+width style.width gets a value excluding padding and border offsetWidth and other properties are read-only properties, which can only be obtained but not assigned style.width is a read-write property, which can be obtained and assigned Summary: Suitable for obtaining the size and position of elements Summary: Suitable for changing the value of elements

Then we first use e.pageX and e.pageY to get the current coordinates of the mouse, and then use e.pageX-box.offsetLeft to get the position of the mouse in the box. Without further ado, let's look at the diagram!

The distance between the black line and the red line is the current position of the mouse in the box. In addition, since the mask layer is a box, the mouse is positioned close to the upper left corner of the box. We need to move the box 50% up and 50% to the right to align the mouse with the center point of the box. Finally, we get the position of the mouse and determine whether it is currently inside the box, that is, whether the moving position is greater than 0 and less than the maximum moving distance.

The code is as follows:

 pic.addEventListener('mousemove', function (e) {
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            //mask moving distance var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
            var maskMax = pic.offsetWidth - mask.offsetWidth;
            // Check if it is inside 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';
}

Now we can see that the mask layer can be moved inside the box and will not exceed the scope of the box, so this project has reached the last step, which is to make the image in the large box next to it show the corresponding block.

Because the two pictures have the same ratio, we can calculate according to the following formula:

That is: the moving distance of the large image = the moving distance of the occlusion layer * the maximum moving distance of the large image / the maximum moving distance of the occlusion layer

Substituting into the formula, we can get the moving distance of the large image. Note that when we slide the mouse from left to right, the large image should move from right to left, so it should be a negative value.

The code is as follows:

 // Maximum moving distance of large image = moving distance of occluding layer * maximum moving distance of large image / maximum moving distance of occluding layer var bigImg = document.querySelector('.bigImg');
            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';

At this point, our magnifying glass project is completed. It is very simple to analyze it step by step! The offset series of attributes are mainly used. So how can we introduce the offset series of attributes without introducing its other two friends? Let me introduce the client series and scroll series.

The complete code is as follows:

<!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>
        .box {
            position: relative;
            margin: 30px;
            width: 300px;
            height: 300px;
            /* pointer-events: none; */
            /* cursor: alias; */
            /* cursor: default; */
        }
 
        .box_pic {
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
 
        }
 
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: rgb(54, 240, 240);
            opacity: 0.5;
            cursor: all-scroll;
            z-index: 9;
        }
 
        .big {
            display: none;
            position: absolute;
            top: 0;
            left: 320px;
            width: 500px;
            height: 500px;
            overflow: hidden;
            border: 1px solid #ccc;
        }
 
        .bigimg {
            position: absolute;
            width: 800px;
            height: 800px;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <img src="./image/pic1.jpg" alt="" class="box_pic">
        <div class="mask"></div>
        <div class="big">
            <img src="./image/bigimg.jpg" alt="" class="bigImg">
        </div>
    </div>
    </div>
    <script>
        var pic = document.querySelector('.box');
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.big');
        //appear and disappear pic.addEventListener('mouseenter', function () {
            mask.style.display = 'block';
            big.style.display = 'block';
        })
        pic.addEventListener('mouseleave', function () {
            mask.style.display = 'none';
            big.style.display = 'none';
        })
        // Move //Get the mouse position pic.addEventListener('mousemove', function (e) {
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            //mask moving distance var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
            var maskMax = pic.offsetWidth - mask.offsetWidth;
            // Check if it is inside 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';
 
            // Maximum moving distance of large image = moving distance of occluding layer * maximum moving distance of large image / maximum moving distance of occluding layer var bigImg = document.querySelector('.bigImg');
            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>

Client Series

Use the client series of related properties to obtain information about the element's visible area.

Client series attributes:

Note: The client includes padding values ​​and the return value does not have units.

scroll series

Use the scroll series of related properties to dynamically get the element's size, scroll distance, etc.

Scroll series properties:

Summary of the three series

The three series include:

The main usage is as follows:

The offset series is often used to obtain the element position offsetLeft offsetTopclient is often used to obtain the element size clientWidth clientHeightscroll is often used to obtain the scroll distance scrollTop scrollLeft Note that the page scroll distance is obtained through window.pageXOffset

After reading this blog, did you get the magnifying glass case right away? This case is not difficult. It mainly reviews the offset, client and scroll in the BOM object. We can also use these knowledge points to complete the production of modal boxes and eliminate star cases~

The above is the detailed content of the implementation process of the Javascript example project magnifying glass special effects. For more information about Javascript magnifying glass special effects, please pay attention to other related articles on 123WORDPRESS.COM!