JavaScript to achieve magnifying glass effect

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

Recommend

Information transmission and function calls between WeChat mini program pages and components

In this article, I will explain the relevant cont...

How to implement navigation function in WeChat Mini Program

1. Rendering2. Operation steps 1. Apply for Tence...

How to use VUE and Canvas to implement a Thunder Fighter typing game

Today we are going to implement a Thunder Fighter...

Detailed analysis of classic JavaScript recursion case questions

Table of contents What is recursion and how does ...

Sample code for implementing mysql master-slave replication in docker

Table of contents 1. Overview 1. Principle 2. Imp...

Detailed explanation of application scenarios of filters in Vue

filter is generally used to filter certain values...

How to use JS to check if an element is within the viewport

Preface Share two methods to monitor whether an e...

Detailed Analysis of Event Bubbling Mechanism in JavaScript

What is bubbling? There are three stages in DOM e...

Detailed explanation of the definition and usage of MySQL stored functions (custom functions)

Stored Functions What is a stored function: It en...

In-depth understanding of the vertical-align property and baseline issues in CSS

vertical-align attribute is mainly used to change...

How to install FastDFS in Docker

Pull the image docker pull season/fastdfs:1.2 Sta...

Vue uses WebSocket to simulate the chat function

The effect shows that two browsers simulate each ...

How to install multiple mysql5.7.19 (tar.gz) files under Linux

For the beginner's first installation of MySQ...

Detailed understanding and comparative analysis of servers Apache, Tomcat and Nginx

1 Question The company's server uses Apache, ...

The difference and usage of Ctrl+z, Ctrl+c and Ctrl+d in Linux commands

What does Ctrl+c, Ctrl+d, Ctrl+z mean in Linux? C...