Implémentation JS du cas d'utilisation de l'effet loupe d'image

Cette fois, je vais vous présenter des cas d'utilisation de l'implémentation JS de l'effet loupe d'image, et quelles sont les précautions d'implémentation JS de l'effet loupe d'image. Voici des cas pratiques. , jetons un coup d'oeil.

Préface

Nous visitons tous souvent divers sites de commerce électronique et les détails des produits nécessitent l'utilisation d'une loupe. Cela doit être familier à tout le monde. Aujourd'hui, nous allons créer un plug-in de loupe d'image pour voir comment l'image est agrandie. ..

Voyons d'abord à quoi ressemblera l'effet final si nous y parvenons

Après avoir lu l'effet, avez-vous des idées ? Sinon, voyons comment y parvenir~

1 idée de mise en œuvre

① Pour obtenir l'effet de zoom avant après avoir pointé vers le haut, vous devez créer trois p, l'un est utilisé pour placer l'image originale, l'autre est utilisé pour placer le p pour l'effet d'agrandissement, et le dernier est la partie de p qui doit être agrandi après que la souris soit pointée vers le haut (nous utilisons plutôt cette balise p p).

② Déterminez le rapport de grossissement. Le point le plus important est que le p sur le doigt de la souris et le p de l'effet de grossissement doivent être égaux au rapport de l'image originale et de l'image agrandie.

③ Affichez l'effet de grossissement après avoir pointé la souris dessus.

2 étapes spécifiques de mise en œuvre

Tout d’abord, construisons trois p.

<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>

Notre partie code HTML est terminée. Ensuite, nous utilisons JS pour implémenter la fonction :

Ajoutez trois événements à l'image d'origine, à savoir l'entrée de la souris, le mouvement de la souris et le mouvement de sortie de la souris.

Lorsque la souris est déplacée dans l'image d'origine, le p lorsque la souris pointe vers le haut et le p de l'effet de grossissement sont affichés en même temps.

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

Événement Mouse Out :

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

Le fait est que lorsque la souris bouge, la partie de la grande image qui doit être agrandie est affichée en fonction de la position de la balise p et de l'image d'origine.

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

Lors de l'analyse de localisation, quatre situations critiques doivent être prises en compte :

Autrement dit, lorsque la souris entre simplement par le haut, le bas, la gauche ou la droite de l'image et que la distance est inférieure à la moitié de la largeur du p sur le doigt de la souris, le p agrandi s'affiche et ne bouge pas.

//特殊情况处理，分别靠近四条边的时候 
 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; 
 }

Enfin, calculez la plage d'affichage de la grande 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";

De cette façon, nous avons terminé le plug-in pour implémenter la loupe d'image en utilisant JS.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!