JS implementation of picture magnifying glass effect use case

This time I will bring you JS to realize the picture Magnifying glass effectUse cases, what are the Notes for JS to realize the picture magnifying glass effect, the following is a practical case, let's take a look.

Preface

We all often visit various e-commerce websites, and the details of the products require the use of a magnifying glass. This must be familiar to everyone. Today we will make a picture magnifying glass plug-in to see how the picture is enlarged...

Let’s first take a look at what the final effect will be if we achieve it

After reading the effect, do you have any ideas? If not, let’s take a look at how to achieve it~

1 Implementation ideas

① To achieve the effect of zooming in after pointing up, you need to make three ps, one is used to place the original image, the other is used to place the p for the enlargement effect, and the last one is the part of p that needs to be enlarged after the mouse is pointed up (we use this p p tag instead).

② Determine the magnification ratio. The most important point is that the p on the mouse finger and the p of the magnification effect should be equal to the ratio of the original image and the enlarged image.

③ Display the magnification effect after pointing the mouse over.

2 Specific implementation steps

First, let’s build three p’s.

<p id="wrapper"> 
     <!--小图-->
    <p id="img_min"> 
       <!--图片-->
       <img src="img/11.png" alt="min"> 
       <!--跟随鼠标的白块-->
       <p id="mousebg"></p> 
     </p> 
   <!--大图-->
     <p id="img_max">
       <img id="img2_img" src="img/11.png" alt="max">
     </p> 
   </p>

Our HTML code part has been completed. Next, we use JS to implement the function:

Add three events to the original image, namely, mouse entry, mouse movement, and mouse movement out.

When the mouse is moved into the original image, the p when the mouse is pointing up and the p of the magnification effect are displayed at the same time.

img1.onmouseover = function () { 
       //鼠标进入 
       img2.style.display = 'block'; 
       mousebg.style.display = 'block'; 
      
     }

Mouse out event:

 img1.onmouseout = function () { 
       //鼠标离开 
       img2.style.display = 'none'; 
       mousebg.style.display = 'none'; 
     }

The point is that when the mouse moves, the part of the large image that needs to be enlarged is displayed based on the position of the p tag and the original image.

var _event = event||window.event;//兼容性处理 
var mouseX = _event.clientX - img1.offsetLeft; 
 //计算鼠标相对与小图的位置 
var mouseY = _event.clientY - img1.offsetTop;

When doing location analysis, four critical situations need to be considered:

That is, when the mouse just enters from the top, bottom, left or right of the picture, and the distance is less than half the width of the p on the mouse finger, the magnified p is displayed and does not move.

//特殊情况处理，分别靠近四条边的时候 
 if(mouseX<mousebg.offsetWidth/2){ 
  mouseX = mousebg.offsetWidth/2; 
   } 
 if(mouseX>img1.offsetWidth-mousebg.offsetWidth/2){ 
  mouseX = img1.offsetWidth-mousebg.offsetWidth/2; 
   } 
 if(mouseY<mousebg.offsetHeight/2){ 
  mouseY = mousebg.offsetHeight/2; 
 } 
 if(mouseY>img1.offsetHeight-mousebg.offsetHeight/2){ 
  mouseY = img1.offsetHeight-mousebg.offsetHeight/2; 
 }

Finally, calculate the display range of the large image:

 //计算大图的显示范围 
 img2_img.style.left = -mul*mouseX+img2.offsetWidth/2+"px"; 
 img2_img.style.top = -mul*mouseY+img2.offsetHeight/2+"px"; 
 //使鼠标在白块的中间 
mousebg.style.left = mouseX-mousebg.offsetWidth/2+"px"; 
mousebg.style.top = mouseY-mousebg.offsetHeight/2+"px";

In this way, we have completed the plug-in for implementing the picture magnifying glass using JS.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of JS implementation of picture magnifying glass effect use case. For more information, please follow other related articles on the PHP Chinese website!