js, um einen einfachen Lupeneffekt zu erzielen

In diesem Artikel wird der spezifische Code von js zur Erzielung eines einfachen Lupeneffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Wirkung

Effekt: Wenn die Maus im Originalbild bewegt wird, folgt das gelbe Kästchen der Maus und der vom gelben Kästchen abgedeckte Teil wird im Anzeigebereich angezeigt.

Das Wirkungsdiagramm sieht wie folgt aus:

Kernidee

1. Wenn die Maus auf dem Bild platziert wird, erscheint der Anzeigebereich. Wenn die Maus das Kästchen verlässt, verschwindet der Anzeigebereich.

2. Wenn die Maus über das Bild bewegt wird, bewegt sich das Kästchen mit der Maus, und die Maus befindet sich in der Mitte des gelben Kästchens

3. Das Kästchen wird so beurteilt, dass es den Bildbereich nicht überschreiten kann

4. Der Anzeigebereich sollte sich um die gleiche Distanz bewegen, wie sich das kleine Kästchen auf dem Bild bewegt.

5. Wenn sich die Größe des Anzeigebereichs ändert oder der Inhalt des Anzeigebereichs vergrößert oder verkleinert wird, ändert sich das gelbe Kästchen auf dem Originalbild entsprechend.

arbeiten

1. Besorgen Sie sich zuerst die Elemente, die Sie benötigen

 // Holen Sie sich die Elemente, die wir auf der Seite brauchen var box1 = document.querySelector ('.box1')
        var gelb = document.querySelector('.yellow')
        var box2 = document.querySelector('#rechteBox')
        var Bildschirm = rechte Box.Kinder[0]

2. Wenn Sie die Maus über das Bild bewegen, wird der Anzeigebereich eingeblendet, beim Wegbewegen verschwindet er.

// Die Maus betritt und verlässt das Bild box1.onmouseenter=function(){
            box2.style.display='Block'
        }
        box1.onmouseleave=Funktion(){
            box2.style.display='keine'
        }

Dies kann durch die Verwendung der Maus erfolgen, um Ereignisse einzugeben und zu verlassen. Stellen Sie einfach ein, ob sie angezeigt werden bzw. nicht angezeigt werden.

3. Bewegen Sie die Maus, das Kästchen bewegt sich mit, und die Maus befindet sich in der Mitte des gelben Kästchens

box1.onmousemove=Funktion(e){
          // Berechne den Mittelpunkt des kleinen Kästchens, wenn es im Bild ist var x = e.pageX-box1.offsetLeft-yellow.offsetWidth/2
           var y = e.pageY - box1.offsetTop - yellow.offsetHeight / 2
         // Weisen Sie dem gelben Feld einen Wert zu, damit es sich mit der Maus bewegt yellow.style.left=x+'px'
           gelb.Stil.oben=y+'px'
        }

1. Verwenden Sie Ereignisse und lösen Sie sie jedes Mal aus, wenn sich die Maus auf dem Bild befindet, sodass es jederzeit aktualisiert werden kann

2. Berechnen Sie den Mittelpunkt des kleinen Kästchens im Bild

Formel: (Verwenden Sie die Position der Maus auf der Seite minus den Versatzabstand des Bildes minus die Hälfte davon)

Durch das Subtrahieren der Hälfte wird sichergestellt, dass die Maus immer in der Mitte des gelben Felds bleibt.

4. Das Kästchen gibt die Beurteilungsbedingung an, so dass das gelbe Kästchen den Bildbereich nicht überschreiten kann

//Bewegen Sie die Maus über das Bild, um das Ereignis box1.onmousemove=function(e){ auszulösen.
            // Mittelpunkt des kleinen Kästchens im Bild berechnen var x = e.pageX-box1.offsetLeft-yellow.offsetWidth/2
           var y = e.pageY - box1.offsetTop - yellow.offsetHeight / 2
 
   // --------------------------------------------------------------------------------
 // Neuer Teil // Bestimme, ob das kleine Kästchen den Bildbereich überschreitet, sodass das gelbe kleine Kästchen den Bildbereich nicht überschreiten kann, wenn (x < 0) {
            // Zu diesem Zeitpunkt ist 0 nicht die linke Seite des Bildes, aber wenn sich das kleine Kästchen ganz links befindet, ist der Mittelpunkt des kleinen Kästchens x = 0
           }sonst wenn(x>box1.offsetWidth-yellow.offsetWidth){
            // Wenn der Mittelpunkt der X-Achse der kleinen Box größer ist als die Breite der Bildbox abzüglich ihrer eigenen Breite, bedeutet dies, dass sie den Grenzwert überschreitet. Sie ist immer gleich der Breite der Bildbox abzüglich ihrer eigenen Breite x=box1.offsetWidth-yellow.offsetWidth
           }
 
        // Wie oben if(y<0){
               y=0
           }sonst wenn(y>box1.offsetHeight-yellow.offsetHeight){
            y=box1.OffsetHeight-yellow.OffsetHeight
           }
 
   // ---------------------------------------------------------------------------------
        // Weisen Sie dem gelben Feld einen Wert zu, damit es sich mit der Maus bewegt yellow.style.left=x+'px'
           gelb.Stil.oben=y+'px'

1. Bestimmen Sie, ob die linke Seite des kleinen Kästchens über das Bild hinausragt. Die in if (x<0) angegebene 0 wird immer noch basierend auf dem Mittelpunkt berechnet.

2. Bestimmen Sie die rechte Seite x>box1.offsetWidth-yellow.offsetWidth

(Ist es größer als die Bildbereichsbreite abzüglich der Breite des kleinen Kästchens)

Warum ist es die Breite der kleinen Box? Sie wird durch den Mittelpunkt der kleinen Box bestimmt, und die Position 0 ist der Mittelpunkt der kleinen Box. Die Hälfte der kleinen Box wurde abgezogen, also ist das, was rechts abgezogen wird, die Hälfte der kleinen Box*2

3. Das Gleiche gilt für oben und unten. Diesmal wird das gelbe Kästchen den Bildbereich nicht überschreiten.

5. Der Anzeigebereich sollte sich um dieselbe Distanz bewegen, wie sich das Kästchen auf dem Bild bewegt.

//Durch Berechnung können wir das Verhältnis zwischen der Bewegung des kleinen Kästchens im Bild und der Bewegung des Anzeigebereichs ermitteln srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'
 srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'

Wie weit sich die Anzeigefläche bewegt, hängt davon ab, wie weit sich das Kästchen bewegt

Der Wert der kleinen Boxbewegung geteilt durch die Breite des Bildes multipliziert mit der Breite des Anzeigebereichs

Der Bewegungswert des Anzeigebereichs kann mit dem Bewegungsverhältnis des kleinen Kästchens im Bild übereinstimmen.

6. Die Größe des Anzeigebereichs ändert sich oder der Inhalt des Anzeigebereichs ändert sich, und das gelbe Feld auf dem Bild ändert sich entsprechend

 // Berechnen Sie die Größe des gelben Felds im Bild yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'
           gelb.Stil.Höhe=Box1.OffsetHeight/(Quelle.OffsetHeight/Box2.OffsetHeight)+'px'
        }

Die Berechnungsmethode lautet: Breite des gelben Felds = Breite des Bildes / (Inhaltsbreite des Anzeigebereichs / Breite des Rahmens des Anzeigebereichs)

Die Höhe ist gleich

Da es durch Mausbewegungen ausgelöst wird, wird es in Echtzeit aktualisiert

Einstellung

.img2{
            Breite: 3000px;
            Höhe: 3000px;
            Position: absolut;
        }
        #rechteBox{
            Position: absolut;
            oben: 0;
            links: 650px;
            Breite: 900px;
            Höhe: 900px;
            Überlauf: versteckt;
            Anzeige: keine;
        }

Wenn Sie die Größe des Felds anpassen oder das Verhältnis vergrößern müssen, ändern Sie einfach die Breite und Höhe dieser beiden Stile.

Inhalt, CSS, JS Gesamtcode

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        *{
            Polsterung: 0;
            Rand: 0;
        }
        .img1{
            Breite: 300px;
            Höhe: 300px;
        }
        .img2{
            Breite: 3000px;
            Höhe: 3000px;
            Position: absolut;
        }
        #rechteBox{
            Position: absolut;
            oben: 0;
            links: 650px;
            Breite: 900px;
            Höhe: 900px;
            Überlauf: versteckt;
            Anzeige: keine;
        }
        .Gelb{
            Hintergrundfarbe: gelb;
            Deckkraft: 0,5;
            Breite: 100px;
            Höhe: 100px;
            Position: absolut;
            oben: 0;
            links: 0;
        }
        .box1{
            Breite: 300px;
            Höhe: 300px;
            Position: relativ;
            Rand links: 300px;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Box1">
        <img src="./images/1.jpg" alt="" class="img1">
        <div Klasse="gelb"></div>
    </div>
    <div id="rechte Box">
        <img src="./images/1.jpg" alt="" class="img2">
    </div>
    <Skript>
        // Holen Sie sich die Elemente, die wir auf der Seite brauchen var box1 = document.querySelector ('.box1')
        var gelb = document.querySelector('.yellow')
        var box2 = document.querySelector('#rechteBox')
        var Quelle = rechte Box.Kinder[0]
        // Die Maus betritt und verlässt das Bild box1.onmouseenter=function(){
            box2.style.display='Block'
        }
        box1.onmouseleave=Funktion(){
            box2.style.display='keine'
        }
        //Bewegen Sie die Maus über das Bild, um das Ereignis box1.onmousemove=function(e){ auszulösen.
            // Mittelpunkt des kleinen Kästchens im Bild berechnen var x = e.pageX-box1.offsetLeft-yellow.offsetWidth/2
           var y = e.pageY - box1.offsetTop - yellow.offsetHeight / 2
 
 
        //Überprüfe, ob die kleine Box den Bildbereich überschreitet, sodass die gelbe Box den Bildbereich nicht überschreiten kann, wenn (x < 0) {
            // Zu diesem Zeitpunkt ist 0 nicht die linke Seite des Bildes, aber wenn sich das kleine Kästchen ganz links befindet, ist der Mittelpunkt des kleinen Kästchens x = 0
           }sonst wenn(x>box1.offsetWidth-yellow.offsetWidth){
            // Wenn der Mittelpunkt der X-Achse der kleinen Box größer ist als die Breite der Bildbox abzüglich ihrer eigenen Breite, bedeutet dies, dass sie den Grenzwert überschreitet. Sie ist immer gleich der Breite der Bildbox abzüglich ihrer eigenen Breite x=box1.offsetWidth-yellow.offsetWidth
           }
 
        // Wie oben if(y<0){
               y=0
           }sonst wenn(y>box1.offsetHeight-yellow.offsetHeight){
            y=box1.OffsetHeight-yellow.OffsetHeight
           }
 
 
        // Weisen Sie dem gelben Feld einen Wert zu, damit es sich mit der Maus bewegt yellow.style.left=x+'px'
           gelb.Stil.oben=y+'px'
 
 
        //Durch Berechnung können wir das Verhältnis zwischen der Bewegung des kleinen Kästchens im Bild und der Bewegung des Anzeigebereichs ermitteln srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'
           srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'
 
        // Berechnen Sie die Größe des gelben Felds im Bild yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'
           gelb.Stil.Höhe=Box1.OffsetHeight/(Quelle.OffsetHeight/Box2.OffsetHeight)+'px'
        }
        
    </Skript>
</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

JS-Version des Bildlupeneffekts
js realisiert die Lupenfunktion der Shopping-Website
js, um einfache Lupeneffekte zu erzielen
js lupe vergrößerungsbild effekt
Ein einfaches Beispiel für die Verwendung von js, um den Effekt einer Lupe zu erzielen
JavaScript-Code für den Bildlupeneffekt [der Code ist relativ einfach]
Eine magische Javascript-Bildlupe
JavaScript-Bildlupe (Drag & Drop, Zoom-Effekt)
Lupeneffekt in nativem JS geschrieben
JavaScript zum Erzielen eines einfachen Lupeneffekts

<<: Tomcat verstümmelte Zeichen in der Konsole in IDEA und wie man die IDEA-Kodierung auf UTF-8 einstellt

>>: Implementierung der Docker-Konfigurationsänderung des Alibaba Cloud-Image-Repository

So installieren Sie den MySQL 5.7.28-Binärmodus unter CentOS 7.4

js, um einen einfachen Lupeneffekt zu erzielen

Wirkung

Kernidee

arbeiten

Einstellung

So installieren Sie den MySQL 5.7.28-Binärmodus unter CentOS 7.4

Probleme bei der Installation von TensorRT im Docker-Container

Detaillierte Erklärung des VUE-Reaktionsprinzips

Erfahrungsaustausch durch einen Frontend-Supervisor mit 7 Jahren Praxiserfahrung

IE8 Beta 1 hat zwei Bereiche, die Ihre Aufmerksamkeit erfordern

So zentrieren Sie den gesamten Seiteninhalt, sodass sich die Höhe an den Inhalt anpasst und automatisch erweitert

So verwenden Sie Docker zum Erstellen eines Tomcat-Clusters mit Nginx (mit Bildern und Text)

Hinweise zur Adresszuordnung von Gerätetreibern im Linux-Kernel

Lösung für das Problem des Speicherns des Formats in HTML TextArea

So fragen Sie dieselbe Tabelle in einer MySQL-Datenbank gleichzeitig ab und aktualisieren sie

Artikel empfehlen

Detaillierter Code zur Implementierung einer 3D-Tag-Cloud in Vue

Detailliertes Verständnis und vergleichende Analyse der Server Apache, Tomcat und Nginx

Detaillierte Erklärung zur Verwendung des Split-Befehls zum Teilen von Linux-Dateien

Ein Beispiel für den Unterschied zwischen den ID- und Name-Attributen in der Eingabe

Im Vorstellungsgespräch wurde ich gefragt, ob select...for update die Tabelle oder die Zeile sperren würde.

Umfassendes Verständnis der HTML-Grundstruktur

Eine kurze Erläuterung, wann MySQL interne temporäre Tabellen verwendet

Aufbauprinzip des Nexus-Privatservers und Tutorial-Analyse

Eine Aufzeichnung der Fallstricke des Lebenszyklus von WeChat-Applet-Komponenten

Umfassende Zusammenfassung der MySQL-Funktionen

VMware vSAN - Zusammenfassung der ersten Schritte

Analysieren Sie den Unterschied zwischen ES5 und ES6

Detaillierte Erläuterung des einzeiligen Funktionscodes des Datumstyps in MySQL

Docker-Installation von MySQL (8 und 5.7)

Ausführliche Erläuterung der HTML-Grundlagen (Teil 1)