JavaScript to achieve magnifying glass effect

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

The effect achieved this time is as follows:

This case is a little bit difficult, and it requires more thinking on both CSS and JS. Without further ado, let's get started~

1. First, we need to use HTML and CSS to plan the overall layout , that is, two adjacent boxes A and B, and a small box S in the left box A. In order to achieve adjacency, the method I adopted was to set position:absolute for both of them, and then set left and top values to make them adjacent .
We can also set position:absolute for the small box S and adjust the background color.

2. Then we need to use js to set the animation effect , that is: when the mouse is placed on box A, the position of small box S will move with the movement of the mouse, and the image in box B will become an enlarged version of the image covered by box S. How to achieve it?

3. First , realize the position change of small box S: call the onmousemove function of box A, pass in the parameter client , which indicates the time the mouse moves on box A. We get the position of the mouse through the client (clientX, clientY), and then get the relative coordinates of the mouse on the image through (clientX-boxA.offsetLeft,clientY-boxA.offsetTop) . By subtracting half of the width and height of box S from this value, we can get the position of box S in A.
But be careful , remember to set boundaries for box S, and keep its coordinates fixed when the horizontal coordinate is 0 or the width of box A, and the vertical coordinate is 0 or the height of box A.

4. Then make the image in box B become an enlarged version of the image covered by box S: Let’s first think about a question, how can this enlargement effect be achieved? From my implementation point of view, for box B, it first needs a background image == the image in box A, and then enlarge it by a certain multiple x. When box S moves, change background-position of B to y to achieve the effect of enlargement + movement .

5. Finally , what are the values of x and y? (Assuming S, A, and B are all in equal proportions) x : The factor by which box B is enlarged should be equal to the size of A divided by the size of S, so that the same image range can be achieved. y : The change in distance when B moves should be the distance box S moves * (the size of box B divided by the size of S). You can think more~

Maybe my implementation process is complicated. If you think of a better way, please leave a message.

The 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>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            position: absolute;
            left: 180px;
            top: 100px;
        }

        #box img {
            width: 400px;
            height: 300px;
            border: 1px solid rgba(255, 255, 255, 0.7);
            vertical-align: bottom;
        }

        #nav {
            width: 480px;
            height: 360px;
            border: 1px solid rgba(255, 255, 255, 0.7);
            position: absolute;
            left: 582px;
            top: 100px;
            background-image: url(../img/morn.jpg);
            background-repeat: no-repeat;
            background-size: 250% 250%
        }

        #small {
            width: 160px;
            height: 120px;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="small"></div>
        <img src="../img/morn.jpg" alt="">
    </div>
    <div id="nav"></div>
    <script>
        let box = document.getElementById("box");
        let small = document.getElementById("small");
        let nav = document.getElementById("nav");

        box.onmousemove = function (client) {
            let x = client.clientX - box.offsetLeft;
            let y = client.clientY - box.offsetTop;
            small.style.left = x - 80 + 'px';
            small.style.top = y - 60 + 'px';
            let dis_x = box.offsetLeft + box.offsetWidth - client.clientX;
            let dis_y = box.offsetTop + box.offsetHeight - client.clientY;

            nav.style.backgroundPositionX = (80 - x) * 3 + 'px';
            nav.style.backgroundPositionY = (60 - y) * 3 + 'px';

            if (x - 80 < 0) {
                small.style.left = 0;
                nav.style.backgroundPositionX = 0;
            }
            if (dis_x <= 80) {
                small.style.left = box.offsetWidth - 160 + 'px';
                nav.style.backgroundPositionX = (160 - box.offsetWidth) * 3 + 'px';
            }
            if (y - 60 < 0) {
                small.style.top = 0;
                nav.style.backgroundPositionY = 0;
            }
            if (dis_y < 60) {
                small.style.top = box.offsetHeight - 120 + 'px';
                nav.style.backgroundPositionY = (120 - box.offsetHeight) * 3 + 'px';
            }

            small.style.backgroundColor = "rgba(135, 207, 235, 0.61)";

        }

        box.onmouseout = function () {
            small.style.backgroundColor="transparent"
        }

    </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:

Implementation process of the magnifying glass effect in the Javascript example project
JavaScript realizes magnifying glass special effects
JavaScript imitates Jingdong magnifying glass special effects
JavaScript object-oriented implementation of magnifying glass case
JavaScript imitates Jingdong magnifying glass effect
JavaScript imitates Taobao magnifying glass effect
Ideas and codes for realizing magnifying glass effect in js
JavaScript implementation of magnifying glass details

<<: W3C Tutorial (15): W3C SMIL Activities

>>: Solution to the problem of invalid line-height setting in CSS