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

So implementieren Sie die Navigationsfunktion im WeChat Mini-Programm

JavaScript zum Erzielen eines Lupeneffekts

So implementieren Sie die Navigationsfunktion im WeChat Mini-Programm

So fügen Sie eine Popup-Aktionsschaltfläche unten für „Select“ und „Cascader“ von Element-UI hinzu

Detailliertes Installationstutorial für die MySQL-Zip-Archivversion (5.7.19)

Erläuterung synthetischer React-Ereignisse

Detaillierte Erläuterung der ActiveMQ-Bereitstellungsmethode in der Linux-Umgebung

Tutorial zur Samba-Konfiguration für die Dateifreigabe im Linux-System

Die Rolle und Methoden der Informationskommunikation im visuellen Design von Websites (Bild und Text)

Details zur Vue-Vorlagenkompilierung

Zusammenfassung der verschiedenen Haltungen der MySQL-Berechtigungseskalation

So verwenden Sie die MySQL DATEDIFF-Funktion, um das Zeitintervall zwischen zwei Daten zu ermitteln

Artikel empfehlen

Detaillierte Schritte zur Installation von Docker 1.8 auf CentOS 7

Analyse des Prozesses der einfachen Bereitstellung von Nginx im Docker-Container

Detaillierte Erläuterung häufig verwendeter Nginx-Umschreibregeln

MySQL-Hochverfügbarkeitslösung MMM (MySQL Multi-Master-Replikationsmanager)

Implementierung des React Page Turner (inkl. Front- und Backend)

Detaillierte Schritte zur Installation des NERDTree-Plugins in Vim unter Ubuntu

Docker installiert Redis 5.0.7 und behebt externe Konfigurations- und Datenprobleme

Grafisches Tutorial zur Installation und Konfiguration der grünen Version von MySQL 5.7.21 winx64

MySQL extrahiert zufällig eine bestimmte Anzahl von Datensätzen

CentOS 6 Kompilieren und installieren Sie ZLMediaKit-Analyse

XHTML drei Dokumenttypdeklarationen

So lösen Sie das Problem des verstümmelten MySQL-Inserts

Vue verwendet dynamische Komponenten, um einen TAB-Umschalteffekt zu erzielen

Weitere Möglichkeiten zur Verwendung von spitzen Klammern in Bash

CentOS7 ermöglicht MySQL8 Master-Slave-Backup und täglich geplantes Voll-Backup (empfohlen)