Detailed explanation of JS implementation of picture magnifying glass plug-in example

This article mainly introduces the use of JS to implement the picture magnifying glass plug-in in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Preface

We all often visit various e-commerce websites, and we need to use a magnifying glass to detail the products. This must be done by everyone. No stranger to you, 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 like 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 pointing up the mouse (We use p tag to replace this p).

② 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 enters, mouse moves, mouse moves out.

When the mouse moves 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, according to the relationship between the p tag and the original image Position to display the part of the large image that needs to be enlarged.

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

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

That is, when the mouse has just entered from the top, bottom, left, or right of the picture When, and this distance is less than half the width of p on the mouse finger, the p in the magnified effect 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";

5 jquery-implemented picture magnifying glass effects, a must-use for shopping mall websites!

Detailed example of using css to achieve the picture magnifying glass effect (picture)

Wonderful Javascript picture magnifying glass_image special effects

The above is the detailed content of Detailed explanation of JS implementation of picture magnifying glass plug-in example. For more information, please follow other related articles on the PHP Chinese website!