JavaScript imitiert den Jingdong-Lupeneffekt

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

Fallstudie

Der gesamte Koffer kann in drei Funktionsmodule unterteilt werden
Wenn die Maus über das kleine Bildfeld fährt, werden die gelbe Maskenebene und das große Bildfeld angezeigt und die Funktion zum Ausblenden der beiden Felder bleibt übrig.
Die gelbe Okklusionsebene folgt der Mausfunktion.
Bewegen Sie die gelbe Maskierungsebene und das große Bild folgt der Bewegung.
Wenn die Maus über das kleine Bildfeld fährt, werden die gelbe Maskenebene und das große Bildfeld angezeigt und die Funktion zum Ausblenden der beiden Felder bleibt übrig.
Ein- und Ausblenden

Verschieben Sie die gelbe Okklusionsebene, und das große Bild folgt der Bewegung. Die Bewegungsdistanz des großen Bildes sollte dem Verhältnis der gelben Okklusionsebene entsprechen.
Finden Sie die Formel zum Verschieben des großen Bildes

Code

<!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>
        .Vorschau_Wrap {
            Breite: 400px;
            Höhe: 400px;
        }

        .vorschau_img {
            Position: relativ;
            Höhe: 398px;
            Rand: 1px durchgezogen #ccc;
        }

        .Maske {
            Anzeige: keine;
            Position: absolut;
            oben: 0;
            links: 0;
            Breite: 300px;
            Höhe: 300px;
            Hintergrund: #FEDE4F;
            Deckkraft: .5;
            Rand: 1px durchgezogen #ccc;
            Cursor: bewegen;
        }

        .groß {
            Anzeige: keine;
            Position: absolut;
            links: 410px;
            oben: 0;
            Breite: 500px;
            Höhe: 500px;
            Hintergrundfarbe: rosa;
            Z-Index: 999;
            Rand: 1px durchgezogen #ccc;
            Überlauf: versteckt;
        }

  /* Sie müssen dem Bild eine absolute Positionierung hinzufügen, bevor Sie „links oben“ festlegen können */
        .bigimg {
            Position: absolut;
            oben: 0;
            links: 0;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Vorschau_Wrap">
        <div Klasse="Vorschaubild">
            <img src="images/s3.png" alt="">
            <div Klasse="Maske"></div>
            <div Klasse="groß">
                <img src="images/big.jpg" alt="" class="bigImg">
            </div>
        </div>
    </div>
    <Skript>
     var preview_img = document.querySelector('.preview_img');
     var mask = document.querySelector('.mask');
     var big = document.querySelector('.big');
     // 1. Wenn unsere Maus über preview_img fährt, zeigen und verbergen wir die Maskenebene und die große Box preview_img.addEventListener('mouseover', function() {
         Maske.Stil.Anzeige = "Block";
         großer.Stil.Anzeige = "Block";
     })
     preview_img.addEventListener('mouseout', Funktion() {
             Maske.Stil.Anzeige = "keine";
             big.style.display = "keine";
         })
         // 2. Wenn sich die Maus bewegt, lass das gelbe Kästchen der Maus folgen preview_img.addEventListener('mousemove', function(e) {
         // (1). Berechne zuerst die Koordinaten der Maus in der Box var x = e.pageX - this.offsetLeft;
         var y = e.pageY - this.offsetTop;
         // konsole.log(x, y);
         // (2) Subtrahieren Sie die Hälfte der Boxhöhe 300, um 150 zu erhalten. Dies sind die endgültigen linken und oberen Werte unserer Maske. // (3) Die Distanz, über die sich unsere Maske bewegt, var maskX = x – mask.offsetWidth/2;
         var maskY = y - mask.offsetHeight / 2;
         // (4) Wenn die x-Koordinate kleiner als 0 ist, lass es bei 0 stoppen // Maximale Bewegungsdistanz der Okklusionsebene var maskMax = preview_img.offsetWidth - mask.offsetWidth;
         wenn (MaskeX <= 0) {
             MaskeX = 0;
         } sonst wenn (MaskeX >= MaskeMax) {
             MaskeX = MaskeMax;
         }
         wenn (MaskeY <= 0) {
             MaskeY = 0;
         } sonst wenn (MaskeY >= MaskeMax) {
             MaskeY = MaskeMax;
         }
         mask.stil.links = maskX + 'px';
         mask.style.top = maskY + 'px';
         // 3. Bewegungsdistanz des großen Bildes = Bewegungsdistanz der verdeckenden Ebene * maximale Bewegungsdistanz des großen Bildes / maximale Bewegungsdistanz der verdeckenden Ebene // Großes Bild var bigIMg = document.querySelector('.bigImg');
         // Maximale Bewegungsdistanz eines großen Bildes var bigMax = bigIMg.offsetWidth - big.offsetWidth;
         // Bewegungsdistanz XY des großen Bildes
         var bigX = MaskeX * bigMax / MaskeMax;
         var bigY = maskY * bigMax / maskMax;
         bigIMg.style.left = großesX + 'px';
         bigIMg.style.top = bigY + '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: