JavaScript realizes magnifying glass special effects

JavaScript realizes magnifying glass special effects

The effect to be achieved: When the mouse is placed on the small picture, a small block will appear above the small picture, and the area inside this small block will be enlarged and displayed in the large picture on the right (as shown in the figure below)

This effect mainly uses: mouse coordinates e.clientX, e.clientY, offsets offsetLeft, offsetTop, offsetWidth, sffsetHeight and other properties.

HTML and CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background:#2c3e50;

        }
        .wrap{
            display: flex;            
            position: relative;
            left: 200px;
            top: 30px;
        }
        .small{
            width: 500px;
            height: 300px;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            left: 0px;
        }
        .small img{
            width: 100%;
            height: 100%;
        }
        .small span{
            display: none;
            position: absolute;  
            left: 0;
            top: 0;      
            width: 100px;
            height: 100px;
            background: rgba(0,0,0,0.5);
            cursor: pointer;
            z-index: 1;
        }
        .big{
            display: none;
            width: 400px;
            height: 400px;
            overflow: hidden;
            position: relative;
            left: 50px;
            top: 0;
        }
        .bigimg{
            position: absolute;
            left: 0;
            top: 0; 
            width: 1000px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="small">
            <img src="img/33.jpg" alt="">
            <span></span>
        </div>
        <div class="big">
            <img src="img/33.jpg" alt="">
        </div>
    </div>

</body>
</html>

JS part:

Move the mouse into the magnifying glass (the small block on the small picture) to display the large picture on the right

//The largest container let wrap=document.querySelector('.wrap');
//Small picture part let smallWrap=document.querySelector('.wrap .small');
let smallImg = document.querySelector('.wrap .small img');
let smallBox = document.querySelector('.wrap .small span');
//Big picture part let bigBox=document.querySelector('.wrap .big');
let bigImg = document.querySelector('.wrap .big img');
smallWrap.onmouseover=function(){
       smallBox.style.display="block";
       bigBox.style.display="block";
}

When the mouse moves on the thumbnail, the magnifying glass follows the movement. Use event.clientX and event.clientY of the event object to get the coordinates of the mouse.

Through event.clientX and event.clientY, you can get the position of the mouse, the offset of the parent container, and the offset of the magnifying glass (in the actual project, an offset may be set for the magnifying glass. In order to remove the influence of this offset, this offset must be subtracted). In the magnifying glass effect, the mouse is always in the middle of the small block, so the moving position can be obtained like this.

smallWrap.onmousemove=function(e){
            let moveX = e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
            let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;

            let maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
            let maxY = smallWrap.offsetHeight - smallBox.offsetHeight;


            smallBox.style.left=moveX+'px'
            smallBox.style.top=moveY+'px'

       }

At this point the magnifying glass will follow the mouse movement. You also need to add a range limit, otherwise the magnifying glass will move farther than the small picture.

Scope limitation

smallWrap.onmousemove=function(e){
            let moveX = e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
            let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;

            let maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
            let maxY = smallWrap.offsetHeight - smallBox.offsetHeight;

           
            //Range limitation method 1/* if(moveX<0){
                moveX=0;
            }else if(moveX>=maxX){
                moveX=maxX
            }
            if(moveY<0){
                moveY=0;
            }else if(moveY>=maxY){
                moveY=maxY
            } */
             //Range limitation method 2 moveX=Math.min(maxX,Math.max(0,moveX))
            moveY=Math.min(maxY,Math.max(0,moveY))

            smallBox.style.left=moveX+'px'
            smallBox.style.top=moveY+'px'

       }

After the magnifying glass follows the movement of the mouse, the next step is to realize that when the magnifying glass moves, the large image also moves (the direction of movement of the large image is opposite). The distance the magnifying glass moves is proportional to the distance the large image moves, the width of the small image is proportional to the width of the large image (including the undisplayed part), and the maximum distance the small image can move is also proportional to the maximum distance the large image can move, so these two formulas can be used to calculate how much the large image should move.

The distance the magnifying glass moves / the width of the small image = the distance the large image moves / the width of the large image. Although this formula can be implemented, there is no limit on the maximum movable distance, which will result in this effect.

So the formula should be written as: distance the magnifying glass moves / width of the thumbnail - width of the magnifying glass (this is the maximum range of movement of the magnifying glass)

The distance the magnifying glass moves / (the width of the small image - the width of the magnifying glass) = the distance the large image moves / (the width of the large image - the display area of ​​the large image)

Note that the direction in which the large image moves is opposite to the direction in which the magnifying glass moves!

smallWrap.onmousemove=function(e){
            let moveX = e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
            let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;

            let maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
            let maxY = smallWrap.offsetHeight - smallBox.offsetHeight;

           
            //Range limitation method 1/* if(moveX<0){
                moveX=0;
            }else if(moveX>=maxX){
                moveX=maxX
            }
            if(moveY<0){
                moveY=0;
            }else if(moveY>=maxY){
                moveY=maxY
            } */
             //Range limitation method 2 moveX=Math.min(maxX,Math.max(0,moveX))
            moveY=Math.min(maxY,Math.max(0,moveY))

            smallBox.style.left=moveX+'px'
            smallBox.style.top=moveY+'px'

            let left=moveX/(smallImg.offsetWidth-smallBox.offsetWidth);//smallImg.offsetWidth-smallBox.offsetWidth maximum moving position let top=moveY/(smallImg.offsetHeight-smallBox.offsetHeight);

            bigImg.style.left=-left*(bigImg.offsetWidth-bigBox.offsetWidth)+'px'
            bigImg.style.top=-top*(bigImg.offsetHeight-bigBox.offsetHeight)+'px'
       }

Finally, add the mouse out event, mouse out, magnifying glass and large image hide

smallWrap.onmouseout=function(){
            smallBox.style.display="none";
            bigBox.style.display="none";
       }

Full code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background:#2c3e50;

        }
        .wrap{
            display: flex;            
            position: relative;
            left: 200px;
            top: 30px;
        }
        .small{
            width: 500px;
            height: 300px;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            left: 100px;
        }
        .small img{
            width: 100%;
            height: 100%;
        }
        .small span{
            display: none;
            position: absolute;  
            left: 0;
            top: 0;      
            width: 100px;
            height: 100px;
            background: rgba(0,0,0,0.5);
            cursor: pointer;
            z-index: 1;
        }
        .big{
            display: none;
            width: 400px;
            height: 400px;
            overflow: hidden;
            position: relative;
            left: 120px;
            top: 0;
        }
        .bigimg{
            position: absolute;
            left: 0;
            top: 0; 
            width: 1000px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="small">
            <img src="img/33.jpg" alt="">
            <span></span>
        </div>
        <div class="big">
            <img src="img/33.jpg" alt="">
        </div>
    </div>
    <script>
        //The largest container let wrap=document.querySelector('.wrap');
       //Small picture part let smallWrap=document.querySelector('.wrap .small');
       let smallImg = document.querySelector('.wrap .small img');
       let smallBox = document.querySelector('.wrap .small span');
        //Big picture part let bigBox=document.querySelector('.wrap .big');
       let bigImg = document.querySelector('.wrap .big img');
       smallWrap.onmouseover=function(){
            smallBox.style.display="block";
            bigBox.style.display="block";
       }
       smallWrap.onmousemove=function(e){
            let moveX = e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
            let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;

            let maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
            let maxY = smallWrap.offsetHeight - smallBox.offsetHeight;

           
            //Range limitation method 1/* if(moveX<0){
                moveX=0;
            }else if(moveX>=maxX){
                moveX=maxX
            }
            if(moveY<0){
                moveY=0;
            }else if(moveY>=maxY){
                moveY=maxY
            } */
             //Range limitation method 2 moveX=Math.min(maxX,Math.max(0,moveX))
            moveY=Math.min(maxY,Math.max(0,moveY))

            smallBox.style.left=moveX+'px'
            smallBox.style.top=moveY+'px'

            let left=moveX/(smallImg.offsetWidth-smallBox.offsetWidth);//smallImg.offsetWidth-smallBox.offsetWidth maximum moving position let top=moveY/(smallImg.offsetHeight-smallBox.offsetHeight);

            bigImg.style.left=-left*(bigImg.offsetWidth-bigBox.offsetWidth)+'px'
            bigImg.style.top=-top*(bigImg.offsetHeight-bigBox.offsetHeight)+'px'
       }
       smallWrap.onmouseout=function(){
            smallBox.style.display="none";
            bigBox.style.display="none";
       }
    </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 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
  • JavaScript to achieve magnifying glass effect
  • Ideas and codes for realizing magnifying glass effect in js
  • JavaScript implementation of magnifying glass details

<<:  Detailed explanation of Django+Vue+Docker to build an interface testing platform

>>:  Sharing tips on using Frameset to center the widescreen

Recommend

Docker custom network implementation

Table of contents 1. Customize the network to rea...

CSS3 mobile vw+rem method to achieve responsive layout without relying on JS

1. Introduction (1) Introduction to vw/vh Before ...

Native JS to implement paging click control

This is an interview question, which requires the...

Step by step guide to build a calendar component with React

Table of contents Business Background Using Techn...

Solution to changing the data storage location of the database in MySQL 5.7

As the data stored in the MySQL database graduall...

Solve the problem of multiple listeners reported when starting tomcat in Idea

Error screenshot Can't find where the excepti...

MySQL 5.7.27 installation and configuration method graphic tutorial

MySQL 5.7.27 detailed download, installation and ...

Web page creation for beginners: Learn to use HTML's hyperlink A tag

The hyperlink a tag represents a link point and i...

Alibaba Cloud Server Linux System Builds Tomcat to Deploy Web Project

I divide the whole process into four steps: Downl...

Docker uses CMD or ENTRYPOINT commands to start multiple services at the same time

Requirement: Celery is introduced in Django. When...

Detailed explanation of replication configuration example between mysql containers

background Last week the company trained on MySQL...

Tutorial on how to remotely connect to MySQL database under Linux system

Preface I recently encountered this requirement a...

This article takes you to explore NULL in MySQL

Table of contents Preface NULL in MySQL 2 NULL oc...

MySQL 8.0.12 winx64 detailed installation tutorial

This article shares the installation tutorial of ...

mysql method to recursively search for all child nodes of a menu node

background There is a requirement in the project ...