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

Detailed explanation of creating a data table in MySQL and establishing primary and foreign key relationships

Preface When creating a primary and foreign key f...

Tutorial on upgrading from Centos7 to Centos8 (with pictures and text)

If you upgrade in a formal environment, please ba...

Three ways to achieve background blur in CSS3 (summary)

1. Normal background blur Code: <Style> htm...

Detailed explanation of the concept of docker container layers

Table of contents 01 Container consistency 02 Con...

Vue custom v-has instruction to implement button permission judgment

Application Scenario Taking the background manage...

Linux uses the scp command to copy files to the local computer and copy local files to the remote server

As shown below: Copy the remote server's file...

Detailed example of HTML element blocking Flash

Copy code The code is as follows: wmode parameter...

CSS3 uses transform deformation combined with events to complete fan-shaped navigation

Because I wrote the word transition incorrectly i...

How to create an index on a join table in MySQL

This article introduces how to create an index on...

How to use sed command to efficiently delete specific lines of a file

Preface Normally, if we want to delete certain li...

Summary of Linux file directory management commands

touch Command It has two functions: one is to upd...

Textarea tag in HTML

<textarea></textarea> is used to crea...

Implementing a simple Christmas game with JavaScript

Table of contents Preface Achieve results Code CS...

Vue implements Modal component based on Teleport

Table of contents 1. Get to know Teleport 2. Basi...

WeChat applet realizes taking photos and selecting pictures from albums

This article shares the specific code for WeChat ...