js to achieve a simple magnifying glass effect

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

Effect

Effect: When the mouse moves in the original image, the yellow box follows the mouse, and the part covered by the yellow box is displayed in the display area.

The effect diagram is as follows:

Core idea

1. When the mouse is placed on the picture, the display area appears. When the mouse leaves the small box, the display area disappears.

2. When the mouse moves on the picture, the small box moves with the mouse, and the mouse is in the middle of the yellow small box

3. The small box is judged so that it cannot exceed the image area

4. The display area should move the same distance as the small box moves on the image.

5. When the size of the display area changes, or the content of the display area increases or decreases, the yellow box on the original picture changes accordingly.

operate

1. Get the elements you need first

 // Get the elements we need on the page var box1 = document.querySelector ('.box1')
        var yellow = document.querySelector('.yellow')
        var box2 = document.querySelector('#rightbox')
        var screen = rightbox.children[0]

2. When you move the mouse to the image, the display area will appear, and when you move away from it, it will disappear.

// The mouse enters and leaves the picture box1.onmouseenter=function(){
            box2.style.display='block'
        }
        box1.onmouseleave=function(){
            box2.style.display='none'
        }

This can be done by using the mouse enter and leave events, just set them to appear and not appear respectively

3. Move the mouse, the small box moves with it, and the mouse is in the middle of the yellow small box

box1.onmousemove=function(e){
          // Calculate the center point of the small box when it is in the picture var x = e.pageX-box1.offsetLeft-yellow.offsetWidth/2
           var y = e.pageY - box1.offsetTop - yellow.offsetHeight / 2
         // Assign a value to the yellow box so that it moves with the mouse yellow.style.left=x+'px'
           yellow.style.top=y+'px'
        }

1. Use events, and trigger each time the mouse is on the picture, so that it can be refreshed at any time

2. Calculate the center point of the small box in the picture

Formula: (use the position of the mouse on the page, minus, the offset distance of the image, minus half of itself)

Subtracting half here ensures that the mouse always stays centered in the yellow box.

4. The small box gives the judgment condition, so that the yellow small box cannot exceed the image area

//Move the mouse over the image to trigger the event box1.onmousemove=function(e){
            // Calculate the center point of the small box in the picture var x = e.pageX-box1.offsetLeft-yellow.offsetWidth/2
           var y = e.pageY - box1.offsetTop - yellow.offsetHeight / 2
 
   // --------------------------------------------------------------------------------
 // New part // Determine whether the small box exceeds the img range, so that the yellow small box cannot exceed the img range if (x < 0) {
            // At this time, 0 is not the left side of the picture, but when the small box is at the far left, the center point of the small box x=0
           }else if(x>box1.offsetWidth-yellow.offsetWidth){
            // When the X-axis center point of the small box is greater than the width of the image box minus its own width, it means it exceeds the limit. It is always equal to the width of the image box minus its own width x=box1.offsetWidth-yellow.offsetWidth
           }
 
        // Same as above if(y<0){
               y=0
           }else if(y>box1.offsetHeight-yellow.offsetHeight){
            y=box1.offsetHeight-yellow.offsetHeight
           }
 
   // ---------------------------------------------------------------------------------
        // Assign a value to the yellow box so that it moves with the mouse yellow.style.left=x+'px'
           yellow.style.top=y+'px'

1. Determine whether the left side of the small box exceeds the image. The 0 given in if (x<0) is still calculated based on the center point.

2. Determine the right side x>box1.offsetWidth-yellow.offsetWidth

(Is it greater than the image area width minus the small box width)

Why is it the width of the small box? It is determined by the center point of the small box, and the position of 0 is the center point of the small box. Half of the small box has been subtracted, so what is subtracted on the right is half of the small box*2

3. The same applies to the top and bottom. This time the yellow box will not exceed the image area.

5. The display area should move the same distance as the small box moves on the image

//Through calculation, we can get the ratio of how much the small box moves in the picture to how much the display area moves srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'
 srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'

How much the display area moves depends on how much the small box moves

The value of the small box movement divided by the width of the image multiplied by the width of the display area

The movement value of the display area can be the same as the movement ratio of the small box in the picture.

6. The size of the display area changes or the content of the display area changes, and the yellow box on the picture changes accordingly

 // Calculate the size of the yellow box on the picture yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'
           yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'
        }

The calculation method is: the width of the yellow box = the width of the image / (the content width of the display area / the width of the frame of the display area)

The height is the same

Because it is triggered by mouse movement, it refreshes in real time

Adjustment

.img2{
            width: 3000px;
            height: 3000px;
            position: absolute;
        }
        #rightbox{
            position: absolute;
            top: 0;
            left: 650px;
            width: 900px;
            height: 900px;
            overflow: hidden;
            display: none;
        }

When you need to adjust the size of the box or enlarge the ratio, just change the width and height of these two styles.

Content, css, js overall code

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .img1{
            width: 300px;
            height: 300px;
        }
        .img2{
            width: 3000px;
            height: 3000px;
            position: absolute;
        }
        #rightbox{
            position: absolute;
            top: 0;
            left: 650px;
            width: 900px;
            height: 900px;
            overflow: hidden;
            display: none;
        }
        .yellow{
            background-color: yellow;
            opacity: 0.5;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .box1{
            width: 300px;
            height: 300px;
            position: relative;
            margin-left: 300px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <img src="./images/1.jpg" alt="" class="img1">
        <div class="yellow"></div>
    </div>
    <div id="rightbox">
        <img src="./images/1.jpg" alt="" class="img2">
    </div>
    <script>
        // Get the elements we need on the page var box1 = document.querySelector ('.box1')
        var yellow = document.querySelector('.yellow')
        var box2 = document.querySelector('#rightbox')
        var source = rightbox.children[0]
        // The mouse enters and leaves the picture box1.onmouseenter=function(){
            box2.style.display='block'
        }
        box1.onmouseleave=function(){
            box2.style.display='none'
        }
        //Move the mouse over the image to trigger the event box1.onmousemove=function(e){
            // Calculate the center point of the small box in the picture var x = e.pageX-box1.offsetLeft-yellow.offsetWidth/2
           var y = e.pageY - box1.offsetTop - yellow.offsetHeight / 2
 
 
        // Check if the small box exceeds the img range, so that the yellow box cannot exceed the img range if (x < 0) {
            // At this time, 0 is not the left side of the picture, but when the small box is at the far left, the center point of the small box x=0
           }else if(x>box1.offsetWidth-yellow.offsetWidth){
            // When the X-axis center point of the small box is greater than the width of the image box minus its own width, it means it exceeds the limit. It is always equal to the width of the image box minus its own width x=box1.offsetWidth-yellow.offsetWidth
           }
 
        // Same as above if(y<0){
               y=0
           }else if(y>box1.offsetHeight-yellow.offsetHeight){
            y=box1.offsetHeight-yellow.offsetHeight
           }
 
 
        // Assign a value to the yellow box so that it moves with the mouse yellow.style.left=x+'px'
           yellow.style.top=y+'px'
 
 
        //Through calculation, we can get the ratio of how much the small box moves in the picture to how much the display area moves srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'
           srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'
 
        // Calculate the size of the yellow box on the picture yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'
           yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'
        }
        
    </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: