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 implementieren Sie ein dynamisches automatisches Hoch- und Herunterfahren von Upstream-Servern ohne Neuladen basierend auf Nginx

Artikel

Beheben Sie das Kompatibilitätsproblem zwischen dem MySQL 8.0-Treiber und der Alibaba Druid-Version

js, um einen einfachen Lupeneffekt zu erzielen

Wirkung

Kernidee

arbeiten

Einstellung

So implementieren Sie ein dynamisches automatisches Hoch- und Herunterfahren von Upstream-Servern ohne Neuladen basierend auf Nginx

Beheben Sie das Kompatibilitätsproblem zwischen dem MySQL 8.0-Treiber und der Alibaba Druid-Version

Analyse der Verwendung temporärer MySQL-Tabellen [Abfrageergebnisse können in temporären Tabellen gespeichert werden]

Zusammenfassung der HOC-Nutzung von React-High-Order-Komponenten

Das neueste Installations-Tutorial für virtuelle Maschinen VMware 14

So integrieren Sie die grafische Verifizierungscode-Komponente in die Ant Design Pro-Anmeldefunktion

Detailliertes Tutorial zur Konfiguration von Nginx für https-verschlüsselten Zugriff

So richten Sie eine VSCode-Remoteverbindung zum Server-Docker-Container ein

So verwenden Sie iframe, um die Daten anderer Webseiten unter Wahrung der Kompatibilität anzuwenden

Einführung in die MySQL-Entsperr- und Sperrtabelle

Artikel empfehlen

So ändern Sie den Standardspeicherort von Docker-Images (Lösung)

Eine kurze Einführung in das Kommandozeilentool mycli zum Bedienen von MySQL-Datenbanken

Implementierung von Docker-Datenvolumenoperationen

Einführung in die Verwendung von exists und except in SQL Server

So schreiben Sie hochwertigen JavaScript-Code

Mybatis + mysql verwendet gespeicherte Prozeduren, um Implementierungscode für Seriennummern zu generieren

JavaScript-Objekte (Details)

Implementierung einer Login-Seite basierend auf layui

Tutorial zur Verwendung von Docker Compose zum Erstellen von Confluence

So generieren Sie Zufallszahlen mit angegebenen Ziffern in MySQL und so generieren Sie Zufallszahlen in Stapeln

Detaillierte Erklärung von count(), group by, order by in MySQL

So nutzen Sie die Multi-Core-CPU in node.js voll aus

Implementierung von Kennwortfeld-Verifizierungsinformationen basierend auf JavaScript

So prüfen Sie, ob Daten vorhanden sind, bevor Sie sie in MySQL einfügen

Einfache Methode zur Installation von MySQL unter Linux