Implementierungsprozess des Lupeneffekts im Javascript-Beispielprojekt

Vorwort

Der Schuldschein-Blog enthält hauptsächlich Lupenhüllen, und die damit verbundenen Wissenspunkte werden vorgestellt. Sie können ihn vertrauensvoll lesen. Am Ende befindet sich der Quellcode.

Fall: Nachahmung des Lupeneffekts von JD.com

Der Effekt ist in der folgenden Abbildung dargestellt:

Funktionsanforderung:

• Wenn die Maus über das kleine Bild fährt, erscheint eine Maskenebene und daneben erscheint auch ein großes Bild. Wenn die Maus herausfährt, verschwindet die Maskenebene und auch das große Bild verschwindet.
• Die Maskenebene lässt sich nur innerhalb des Kästchens verschieben, nicht jedoch außerhalb.
• Im kleinen Kästchen bewegt sich die Maske, im großen Bild ist die dazugehörige Platte zu sehen.

Fallstudie:

• Elemente ausblenden und einblenden
• Der Bewegungsbereich der Maskenebene wird mithilfe des Offsets berechnet
• Berechnen Sie die zurückgelegte Strecke innerhalb der großen Box

Beispielcode:

Zunächst sollten wir die Struktur aufbauen, die ungefähr wie folgt aussieht:

Nachdem Sie die Stile aller Felder geschrieben haben, blenden Sie das blaue Feld der Maskenebene und das Feld rechts mit dem großen roten Bild aus. Beachten Sie, dass das violette Feld relativ positioniert ist und alle Felder basierend auf dem violetten Feld positioniert sind.

Der Code lautet wie folgt:

<div Klasse="Box">
        <img src="./image/pic1.jpg" alt="" class="box_pic">
        <div Klasse="Maske"></div>
        <div Klasse="groß">
            <img src="./image/bigimg.jpg" alt="" class="bigImg">
        </div>
</div>

Nach der Konstruktion fügen wir dieser Box Mausbewegungsereignisse hinzu. Wenn die Maus auf die Box zugeht, erscheinen die Maskenbox und die große Box. Wenn die Maus sich aus der Box herausbewegt, verschwinden die Maskenbox und die große Box.

Der Code lautet wie folgt:

  var pic = document.querySelector('.box');
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.big');
        //erscheinen und verschwinden pic.addEventListener('mouseenter', function () {
            Maske.Stil.Anzeige = "Block";
            großer.Stil.Anzeige = "Block";
        })
        pic.addEventListener('mouseleave', Funktion () {
            Maske.Stil.Anzeige = "keine";
            big.style.display = "keine";
        })

Als nächstes müssen wir die Distanz berechnen, über die sich die Maskenebene bewegen kann.

Wie aus der obigen Abbildung ersichtlich ist, ist die Entfernung, um die sich die Maskenebene innerhalb der kleinen Box bewegen kann, nur die Breite der kleinen Box abzüglich der Breite der Maskenebenenbox, da wir verlangen, dass die Maskenebene den Bereich der kleinen Box nicht überschreiten kann. Zu diesem Zeitpunkt verwenden wir die Attribute im Offset.

Offset-Serie

Verwenden Sie die Offset-Reihe verwandter Eigenschaften, um die Position (den Offset), die Größe usw. des Elements dynamisch abzurufen

Eigenschaften der Offset-Serie:

Hinweis: Die Offset-Reihe hat nur offsetTop und offsetLeft! ! ! Der zurückgegebene Wert hat keine Einheit.

Vergleich: Offset- und Stilattribute

Versatz

styleoffset kann den Stilwert in jedem Stylesheet abrufen, style kann den Stilwert nur im Inline-Stylesheet abrufen

Die durch die Offset-Reihe erhaltenen Werte sind einheitenlos.

style.width erhält einen String mit den Einheiten offsetWidth inklusive padding+border+width style.width erhält einen Wert ohne padding und border offsetWidth und andere Eigenschaften sind schreibgeschützte Eigenschaften, die nur abgerufen, aber nicht zugewiesen werden können style.width ist eine Lese-/Schreibeigenschaft, die abgerufen und zugewiesen werden kann Zusammenfassung: Geeignet zum Abrufen der Größe und Position von Elementen Zusammenfassung: Geeignet zum Ändern des Werts von Elementen

Dann verwenden wir zuerst e.pageX und e.pageY, um die aktuellen Koordinaten der Maus abzurufen, und verwenden dann e.pageX-box.offsetLeft, um die Position der Maus in der Box abzurufen. Schauen wir uns ohne weitere Umschweife das Diagramm an!

Der Abstand zwischen der schwarzen und der roten Linie ist die aktuelle Position der Maus im Feld. Da die Maskenebene ein Kästchen ist, wird die Maus außerdem nahe der oberen linken Ecke des Kästchens positioniert. Wir müssen das Kästchen um 50 % nach oben und 50 % nach rechts verschieben, um die Maus auf den Mittelpunkt des Kästchens auszurichten. Abschließend ermitteln wir die Position der Maus und stellen fest, ob sie sich aktuell innerhalb der Box befindet, also ob die Bewegungsposition größer als 0 und kleiner als die maximale Bewegungsdistanz ist.

Der Code lautet wie folgt:

 pic.addEventListener('Mausbewegung', Funktion (e) {
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            //Bewegungsdistanz der Maske var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
            var maskMax = Bild.OffsetWidth - mask.OffsetWidth;
            //Überprüfen Sie, ob es innerhalb der Box ist, if (maskX <= 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';
}

Jetzt können wir sehen, dass die Maskenebene innerhalb der Box verschoben werden kann und den Umfang der Box nicht überschreitet. Dieses Projekt hat also den letzten Schritt erreicht, nämlich das Bild in der großen Box daneben so zu gestalten, dass der entsprechende Block angezeigt wird.

Da die beiden Bilder das gleiche Verhältnis haben, können wir nach folgender Formel rechnen:

Das heißt: die Bewegungsdistanz des großen Bildes = die Bewegungsdistanz der Okklusionsebene * die maximale Bewegungsdistanz des großen Bildes / die maximale Bewegungsdistanz der Okklusionsebene

Durch Einsetzen in die Formel erhalten wir die Bewegungsdistanz des großen Bildes. Beachten Sie, dass sich das große Bild von rechts nach links bewegen sollte, wenn wir die Maus von links nach rechts bewegen. Es sollte sich also um einen negativen Wert handeln.

Der Code lautet wie folgt:

 // Maximale Bewegungsdistanz des großen Bildes = Bewegungsdistanz der verdeckenden Ebene * maximale Bewegungsdistanz des großen Bildes / maximale Bewegungsdistanz der verdeckenden Ebene var bigImg = document.querySelector('.bigImg');
            bigMax = großesBild.OffsetWidth - big.OffsetWidth;
            var bigX = MaskeX * bigMax / MaskeMax;
            var bigY = maskY * bigMax / maskMax;
            bigImg.style.left = -bigX + 'px';
            bigImg.style.top = -bigY + 'px';

An diesem Punkt ist unser Lupenprojekt abgeschlossen. Es ist ganz einfach, es Schritt für Schritt zu analysieren! Hauptsächlich wird die Offset-Attributreihe verwendet. Wie können wir also die Offset-Attributreihe einführen, ohne ihre beiden anderen Freunde einzuführen? Lassen Sie mich die Client-Serie und die Scroll-Serie vorstellen.

Der vollständige 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>
        .Kasten {
            Position: relativ;
            Rand: 30px;
            Breite: 300px;
            Höhe: 300px;
            /* Zeigerereignisse: keine; */
            /* Cursor: Alias; */
            /* Cursor: Standard; */
        }
 
        .box_pic {
            Breite: 300px;
            Höhe: 300px;
            Rand: 1px durchgezogen #ccc;
 
        }
 
        .Maske {
            Anzeige: keine;
            Position: absolut;
            oben: 0;
            links: 0;
            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: RGB (54, 240, 240);
            Deckkraft: 0,5;
            Cursor: Alles scrollen;
            Z-Index: 9;
        }
 
        .groß {
            Anzeige: keine;
            Position: absolut;
            oben: 0;
            links: 320px;
            Breite: 500px;
            Höhe: 500px;
            Überlauf: versteckt;
            Rand: 1px durchgezogen #ccc;
        }
 
        .bigimg {
            Position: absolut;
            Breite: 800px;
            Höhe: 800px;
        }
    </Stil>
</Kopf>
 
<Text>
    <div Klasse="Box">
        <img src="./image/pic1.jpg" alt="" class="box_pic">
        <div Klasse="Maske"></div>
        <div Klasse="groß">
            <img src="./image/bigimg.jpg" alt="" class="bigImg">
        </div>
    </div>
    </div>
    <Skript>
        var pic = document.querySelector('.box');
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.big');
        //erscheinen und verschwinden pic.addEventListener('mouseenter', function () {
            Maske.Stil.Anzeige = "Block";
            großer.Stil.Anzeige = "Block";
        })
        pic.addEventListener('mouseleave', Funktion () {
            Maske.Stil.Anzeige = "keine";
            big.style.display = "keine";
        })
        // Bewegen //Mausposition abrufen pic.addEventListener('mousemove', function (e) {
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            //Bewegungsdistanz der Maske var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
            var maskMax = Bild.OffsetWidth - mask.OffsetWidth;
            //Überprüfen Sie, ob es innerhalb der Box ist, if (maskX <= 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';
 
            // Maximale Bewegungsdistanz des großen Bildes = Bewegungsdistanz der verdeckenden Ebene * maximale Bewegungsdistanz des großen Bildes / maximale Bewegungsdistanz der verdeckenden Ebene var bigImg = document.querySelector('.bigImg');
            bigMax = großesBild.OffsetWidth - big.OffsetWidth;
            var bigX = MaskeX * bigMax / MaskeMax;
            var bigY = maskY * bigMax / maskMax;
            bigImg.style.left = -bigX + 'px';
            bigImg.style.top = -bigY + 'px';
        })
    </Skript>
</body>
 
</html>

Kundenserie

Verwenden Sie die Client-Reihe verwandter Eigenschaften, um Informationen über den sichtbaren Bereich des Elements zu erhalten.

Client-Serienattribute:

Hinweis: Der Client fügt Füllwerte hinzu und der Rückgabewert hat keine Einheiten.

Scroll-Serie

Verwenden Sie die Bildlaufreihe verwandter Eigenschaften, um die Größe, Bildlaufdistanz usw. des Elements dynamisch abzurufen.

Eigenschaften der Bildlaufreihe:

Zusammenfassung der drei Serien

Die drei Serien umfassen:

Die hauptsächliche Verwendung ist wie folgt:

Die Offset-Reihe wird häufig verwendet, um die Elementposition zu ermitteln. offsetLeft offsetTopclient wird häufig verwendet, um die Elementgröße zu ermitteln. clientWidth clientHeightscroll wird häufig verwendet, um die Bildlaufdistanz zu ermitteln. scrollTop scrollLeft Beachten Sie, dass die Bildlaufdistanz der Seite über window.pageXOffset ermittelt wird.

Haben Sie sich nach der Lektüre dieses Blogs gleich das Lupenetui besorgt? Dieser Fall ist nicht schwierig. Er überprüft hauptsächlich den Offset, den Client und den Bildlauf im BOM-Objekt. Wir können diese Wissenspunkte auch nutzen, um die Produktion von Modalboxen abzuschließen und Sternfälle zu eliminieren ~

Oben finden Sie den detaillierten Inhalt des Implementierungsprozesses des Javascript-Beispielprojekts „Lupen-Spezialeffekte“. Weitere Informationen zu Javascript-Lupen-Spezialeffekten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!