JS-Implementierung des Anwendungsfalls für den Bildlupeneffekt

Dieses Mal werde ich Ihnen Anwendungsfälle der JS-Implementierung des Bild-Lupeneffekts und die Vorsichtsmaßnahmen der JS-Implementierung des Bildlupeneffekts vorstellen. Hier sind praktische Fälle , lass uns einen Blick darauf werfen.

Vorwort

Wir alle besuchen häufig verschiedene E-Commerce-Websites und die Details der Produkte erfordern die Verwendung einer Lupe. Dies muss jedem bekannt sein. Heute werden wir ein Bildlupen-Plug-in erstellen, um zu sehen, wie das Bild vergrößert wird. ..

Schauen wir uns zunächst an, wie der Endeffekt aussehen wird, wenn wir ihn erreichen

Nachdem Sie den Effekt gelesen haben, haben Sie irgendwelche Ideen? Wenn nicht, schauen wir uns an, wie wir ihn erreichen können~

1 Umsetzungsidee

① Um den Effekt des Vergrößerns nach dem Zeigen nach oben zu erzielen, müssen Sie drei ps erstellen, eines zum Platzieren des Originalbilds, das andere zum Platzieren des p für den Vergrößerungseffekt und das letzte ist der Teil von p das vergrößert werden muss, nachdem die Maus nach oben zeigt (wir verwenden stattdessen dieses p p-Tag).

② Bestimmen Sie das Vergrößerungsverhältnis. Der wichtigste Punkt ist, dass das p am Mausfinger und das p des Vergrößerungseffekts dem Verhältnis des Originalbilds zum vergrößerten Bild entsprechen.

③ Zeigen Sie den Vergrößerungseffekt an, nachdem Sie mit der Maus darüber gezeigt haben.

2 konkrete Umsetzungsschritte

Lassen Sie uns zunächst drei Ps bilden.

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

Unser HTML-Codeteil ist fertiggestellt. Als nächstes verwenden wir JS, um die Funktion zu implementieren:

Fügen Sie dem Originalbild drei Ereignisse hinzu, nämlich Mauseingabe, Mausbewegung und Mausbewegung heraus.

Wenn die Maus in das Originalbild bewegt wird, werden gleichzeitig das p, wenn die Maus nach oben zeigt, und das p des Vergrößerungseffekts angezeigt.

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'; 
     }

Der Punkt ist, dass beim Bewegen der Maus der Teil des großen Bildes, der vergrößert werden muss, basierend auf der Position des p-Tags und des Originalbilds angezeigt wird.

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

Bei der Standortanalyse müssen vier kritische Situationen berücksichtigt werden:

Das heißt, wenn die Maus nur von oben, unten, links oder rechts in das Bild eindringt und der Abstand weniger als die Hälfte der Breite des p auf dem Mausfinger beträgt, wird das vergrößerte p angezeigt und bewegt sich nicht.

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

Berechnen Sie abschließend den Anzeigebereich des großen Bildes:

 //计算大图的显示范围 
 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";

Auf diese Weise verwenden wir JS, um das Bildlupen-Plug-In zu implementieren.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonJS-Implementierung des Anwendungsfalls für den Bildlupeneffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!