JavaScript zum Erzielen eines Lupeneffekts

In diesem Artikel wird der spezifische Code für JavaScript zur Erzielung des Lupeneffekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Der diesmal erzielte Effekt ist wie folgt:

Dieser Fall ist etwas schwierig und erfordert mehr Nachdenken über CSS und JS. Lassen Sie uns ohne weitere Umschweife loslegen~

1. Zuerst müssen wir mit HTML und CSS das Gesamtlayout planen, also zwei nebeneinander liegende Boxen A und B und eine kleine Box S in der linken Box A. Um eine Nachbarschaft zu erreichen, habe ich die Methode gewählt position:absolute festzulegen und dann left und top Werte so einzustellen, dass sie nebeneinander liegen .
Wir können auch position:absolute für das kleine Kästchen S festlegen und die Hintergrundfarbe anpassen.

2. Dann müssen wir js verwenden, um den Animationseffekt einzustellen, d. h.: Wenn die Maus auf Feld A platziert wird, verschiebt sich die Position des kleinen Felds S mit der Bewegung der Maus und das Bild in Feld B wird zu einer vergrößerten Version des Bildes, das von Feld S abgedeckt wird. Wie erreicht man das?

3. Realisieren Sie zunächst die Positionsänderung des kleinen Kästchens S: Rufen Sie die Funktion onmousemove von Kästchen A auf und übergeben Sie den Parameter client , der die Zeit angibt, zu der die Maus über Kästchen A bewegt wird. Wir ermitteln die Position der Maus über den Client (clientX, clientY) und dann die relativen Koordinaten der Maus auf dem Bild über (clientX-boxA.offsetLeft,clientY-boxA.offsetTop) . Indem wir von diesem Wert die Hälfte der Breite und Höhe von Box S abziehen, können wir die Position von Box S in A ermitteln.
Aber seien Sie vorsichtig , denken Sie daran, Grenzen für Box S festzulegen und ihre Koordinaten festzuhalten, wenn die horizontale Koordinate 0 oder die Breite von Box A und die vertikale Koordinate 0 oder die Höhe von Box A ist.

4. Machen Sie dann das Bild in Feld B zu einer vergrößerten Version des Bildes, das von Feld S abgedeckt wird: Lassen Sie uns zunächst über eine Frage nachdenken: Wie kann dieser Vergrößerungseffekt erzielt werden? Aus meiner Sicht der Implementierung muss für Feld B zuerst ein Hintergrundbild == das Bild in Feld A sein und dieses dann um ein bestimmtes Vielfaches x vergrößert werden. Wenn sich Feld S bewegt, ändere background-position von B auf y, um den Effekt der Vergrößerung + Bewegung zu erzielen.

5. Und schließlich : Was sind die Werte von x und y? (Unter der Annahme, dass S, A und B alle im gleichen Verhältnis zueinander stehen) x : Der Faktor, um den Feld B vergrößert wird, sollte der Größe von A geteilt durch die Größe von S entsprechen, damit der gleiche Bildbereich erreicht werden kann. y : Die Änderung der Distanz, wenn B sich bewegt, sollte der Distanz entsprechen, um die sich Box S bewegt * (die Größe von Box B geteilt durch die Größe von S). Du kannst mehr denken ~

Vielleicht ist mein Implementierungsprozess kompliziert. Wenn Ihnen eine bessere Möglichkeit einfällt, hinterlassen Sie bitte eine Nachricht.

Der Code lautet wie folgt:

<!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>
        * {
            Rand: 0;
            Polsterung: 0;
        }

        #Kasten {
            Position: absolut;
            links: 180px;
            oben: 100px;
        }

        #box img {
            Breite: 400px;
            Höhe: 300px;
            Rand: 1px durchgezogener RGBA (255, 255, 255, 0,7);
            vertikale Ausrichtung: unten;
        }

        #nav {
            Breite: 480px;
            Höhe: 360px;
            Rand: 1px durchgezogener RGBA (255, 255, 255, 0,7);
            Position: absolut;
            links: 582px;
            oben: 100px;
            Hintergrundbild: URL (../img/morn.jpg);
            Hintergrundwiederholung: keine Wiederholung;
            Hintergrundgröße: 250 % 250 %
        }

        #klein {
            Breite: 160px;
            Höhe: 120px;
            Position: absolut;
        }
    </Stil>
</Kopf>

<Text>
    <div id="box">
        <div id="klein"></div>
        <img src="../img/morn.jpg" alt="">
    </div>
    <div id="nav"></div>
    <Skript>
        let box = document.getElementById("box");
        lass klein = document.getElementById("klein");
        let nav = document.getElementById("nav");

        box.onmousemove = Funktion (Client) {
            lass x = Client.clientX - Box.OffsetLeft;
            lass y = client.clientY - box.offsetTop;
            klein.Stil.links = x - 80 + 'px';
            klein.stil.oben = y - 60 + 'px';
            let dis_x = box.offsetLeft + box.offsetWidth - client.clientX;
            sei dis_y = box.offsetTop + box.offsetHeight - client.clientY;

            nav.style.backgroundPositionX = (80 - x) * 3 + 'px';
            nav.style.backgroundPositionY = (60 - y) * 3 + 'px';

            wenn (x - 80 < 0) {
                klein.Stil.links = 0;
                nav.style.backgroundPositionX = 0;
            }
            wenn (dis_x <= 80) {
                kleiner.Stil.links = Box.OffsetWidth – 160 + „px“;
                nav.style.backgroundPositionX = (160 - box.offsetWidth) * 3 + 'px';
            }
            wenn (y - 60 < 0) {
                klein.stil.oben = 0;
                nav.style.backgroundPositionY = 0;
            }
            wenn (dis_y < 60) {
                kleiner.Stil.oben = box.offsetHeight - 120 + 'px';
                nav.style.backgroundPositionY = (120 - box.offsetHeight) * 3 + 'px';
            }

            klein.Stil.Hintergrundfarbe = "rgba(135, 207, 235, 0,61)";

        }

        box.onmouseout = Funktion () {
            small.style.backgroundColor="transparent"
        }

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

Implementierungsprozess des Lupeneffekts im Javascript-Beispielprojekt
JavaScript realisiert Lupen-Spezialeffekte
JavaScript imitiert die Spezialeffekte der Jingdong-Lupe
Objektorientierte JavaScript-Implementierung eines Lupengehäuses
JavaScript imitiert den Jingdong-Lupeneffekt
JavaScript imitiert den Taobao-Lupeneffekt
Ideen und Codes zur Realisierung des Lupeneffekts in js
JavaScript-Implementierung von Lupendetails

<<: W3C Tutorial (15): W3C SMIL Aktivitäten

>>: Lösung für das Problem der ungültigen Zeilenhöheneinstellung in CSS

Implementierung der Remote-Linux-Entwicklung mit vscode

JavaScript zum Erzielen eines Lupeneffekts

Implementierung der Remote-Linux-Entwicklung mit vscode

Zusammenfassung einiger gängiger Methoden von JavaScript-Arrays

Detaillierte Erläuterung der Konfiguration des statischen Nginx-Dienstes (Root- und Alias-Anweisungen)

JavaScript Canvas-Textuhr

Detaillierte Analyse der Parameterdatei my.cnf von MySQL in Ubuntu

Kopieren und Einfügen ist der Feind der Verpackung

So verwalten Sie MySQL-Indizes und Datentabellen

Zwei spezielle Werte in CSS werden verwendet, um die Vererbungs- und Initialisierungsmethoden der Kaskade zu steuern

Detaillierter Prozess zur Konfiguration von NIS in Centos7

Zusammenfassung der HTML-Formatierungsstandards für webbasierte E-Mail-Inhalte

Artikel empfehlen

Erfahren Sie in einem Artikel mehr über TypeScript-Datentypen

Beispiel für den schnellen Aufbau einer LEMP-Umgebung mit Docker

Nginx-Konfiguration zum Erreichen eines Lastenausgleichs auf mehreren Servern

Warum ich Nginx als Backend-Server-Proxy empfehle (Gründeanalyse)

Eine kurze Erläuterung der ifnull()-Funktion ähnlich der nvl()-Funktion in MySQL

Diagramm des Tomcat CentOS-Installationsprozesses

Beispielanalyse der Listen-Direktive in Nginx

Fehlerbehebung bei Master-Slave-Verzögerungsproblemen beim Upgrade von MySQL 5.6 auf 5.7

Detaillierte Erläuterung der Verwendung des Nginx-Reverse-Proxys zur Lösung domänenübergreifender Probleme

CentOS 6 Kompilieren und installieren Sie ZLMediaKit-Analyse

Detaillierte Erläuterung zur Verwendung von Docker zum Bereitstellen der Django + MySQL8-Entwicklungsumgebung

Über die Überlappung von Randwert und vertikalem Rand in CSS

Erstellen einer LEMP-Umgebung (Linux+Nginx+MySQL+PHP) unter CentOS 8.1 (Details zum Tutorial)

Fehlerbehebung bei hohem Speicherverbrauch von NodeJs, tatsächlicher Kampfrekord

Erfahren Sie, wie Sie eine MySQL-Datenbank auf dem Mac installieren