JavaScript implementiert Produktdetails der E-Commerce-Plattform

In diesem Artikel wird ein allgemeines Beispiel für die Anzeige von Produktdetails auf einer E-Commerce-Plattform vorgestellt. Beispielsweise werden auf der Detailseite eines bestimmten Mobiltelefons in der Kategorie „Mobiltelefone“ einer bestimmten Dong-Website die Details des Mobiltelefons angezeigt. Wenn das kleine Bild auf der linken Seite den Mausfokus des Benutzers erhält, kann der große Bildeffekt des Bildbereichs auf der rechten Seite des Bildschirms angezeigt werden. Der JS-Teil umfasst hauptsächlich Ereignisse wie Mouseover, Maus verlassen, Maus bewegen usw. und enthält eine kleine Algorithmusformel. Der Effekt wird zuerst angezeigt:

Das Wirkungsdiagramm einer E-Commerce-Plattform ist unten dargestellt:

Der Codeteil dieses Falls:

HTML-Struktur:

<div Klasse="Box">
        <img src="images/s3.png" alt="">
        <div Klasse="Maske"></div>
        <div Klasse="groß">
            <img src="images/big.jpg" alt="">
        </div>
</div>

CSS-Stile:

<Stil>
        * {
            Polsterung: 0;
            Rand: 0;
        }
 
        .Kasten {
            Position: relativ;
            oben: 70px;
            links: 30px;
            Breite: 400px;
            Höhe: 400px;
            Rand: 1px durchgezogen #ccc;
        }
        .box > img {
            Höhe: 100%;
        }
 
        .Maske {
            Anzeige: keine;
            Position: absolut;
            oben: 0;
            links: 0;
            Breite: 300px;
            Höhe: 300px;
            Box-Größe: Rahmenbox;
            Hintergrundfarbe: rgba(254, 222, 79, .5);
            Rand: 1px durchgezogen #ccc;
            Cursor: bewegen;
            /*Ändere den Mausstatus auf Kreuz*/
        }
 
        .groß {
            Anzeige: keine;
            Position: absolut;
            oben: 0;
            links: 410px;
            Breite: 500px;
            Höhe: 500px;
            Rand: 1px durchgezogen #ccc;
            Überlauf: versteckt;
            Z-Index: 999;
        }
 
        .bigimg {
            /* Achten Sie darauf, dem Bild unter .big ein Positionierungsattribut zu geben, damit sich seine Position mit der Bewegung der Maskenebene ändern kann*/
            Position: absolut;
            oben: 0;
            links: 0;
        }
</Stil>

JavaScript-Verhalten:

<Skript>
        window.addEventListener('laden', Funktion () {
            // 1. Holen Sie sich das Element var box = document.querySelector('.box');
            var mask = document.querySelector('.mask');
            var big = document.querySelector('.big');
 
            // 2. Ereignisse registrieren // (1) Wenn die Maus über die Box fährt, werden onmouseover die Maskenebene und das große Bild rechts angezeigt  
            box.addEventListener('mouseover', Funktion () {
                Maske.Stil.Anzeige = "Block";
                großer.Stil.Anzeige = "Block";
            })
            // (2) Wenn die Maus den Rahmen verlässt, werden die Maskenebene und das große Bild rechts ausgeblendet.  
            box.addEventListener('mouseout', Funktion () {
                Maske.Stil.Anzeige = "keine";
                big.style.display = "keine";
            })
            // (3) Lassen Sie die Maskenebene mit der Maus bewegen (dieses Ereignis sollte geschrieben werden, wenn die Maus erreicht wird)
            box.addEventListener('Mausbewegung', Funktion (e) {
                // (1). Berechnen Sie zunächst die Koordinaten der Maus in der Box. Die Koordinaten der Maus in der Box = die Koordinaten der Maus auf dem Bildschirm - offsetLeft/offsetTop der Box
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                // (2) Die Maus sollte sich in der Mitte der Maskenschicht befinden, so Ontale Mitte des Masken -Layervar -Masky = Y - Maske.Offseteight/ 2; Höhe der Maskenschicht // (4) Wenn die X -Koordinate weniger als 0 beträgt, lassen Sie sie bei 0 // den maximalen Bewegungsabstand der Maskenschicht = die Breite der übergeordneten Box der Maskenschicht - die Breite der Maskenschicht (weil die Maskenschicht in diesem Fall ein Quadrat ist, die horizontalen und vertikalen Bereiche sind gleich)
                var maskMax = box.offsetWidth - mask.offsetWidth; // Maximale Bewegungsdistanz der Maskenebene // Bestimmen und begrenzen Sie den Bewegungsbereich der Maskenebene: Horizontaler Bewegungsbereich:
                maskX <= 0 ? maskX = 0 : maskX = maskX; // Horizontaler minimaler Bewegungsbereich maskX >= maskMax ? maskX = maskMax : maskX = maskX; // Horizontaler minimaler Bewegungsbereich // Bestimmen Sie den Bewegungsbereich der begrenzten Maskenebene: Vertikaler Bewegungsbereich:
                maskY <= 0 ? maskY = 0 : maskY = maskY; // Minimaler vertikaler Bewegungsbereich maskY >= maskMax ? maskY = maskMax : maskY = maskY; // Maximaler vertikaler Bewegungsbereich // Gib die Mauskoordinatenwerte links und oben von der Maske an (Maske wird positioniert). Beachte, dass px-Einheiten addiert werden müssen! ! !
                mask.stil.links = maskX + 'px';
                mask.style.top = maskY + 'px';
                // (5) Das große Bild rechts mit der Maskenebene bewegen lassen // Bewegungsdistanz des großen Bildes = Bewegungsdistanz der Maskenebene * maximale Bewegungsdistanz des großen Bildes / maximale Bewegungsdistanz der Maskenebene // Das große Bild abrufen var bigImg = big.querySelector('img');
                // Maximale Bewegungsdistanz des 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;
                // Hinweis: 1. Das von bigImg erhaltene Element muss über CSS-Positionierungsattribute verfügen, um die Position zu verschieben. Ohne Positionierung ändert sich die Position nicht. // 2. Die Bewegung des großen Bildes und der Maskenebene erfolgt in die entgegengesetzte Richtung, denn wenn sich die Maskenebene nach links bewegt, bewegt sich das große Bild tatsächlich nach rechts. Daher ist der Wert eine negative Zahl. bigImg.style.left = -bigX + 'px';
                bigImg.style.top = -bigY + 'px';
            })
 
        })
</Skript>

Effektanzeige:

1. Wenn das Programm läuft und die Maus des Benutzers nicht über das kleine Bild links (.box) gefahren ist:

2. Wenn die Maus über das kleine Bild links fährt:

3. Wenn die Maus über das kleine Bild (.box) links fährt:

Wissenspunkte und Details zum Fall:

1. HTML-Struktur: Die Hauptstruktur besteht aus einem großen Div mit einem Bild (d. h. dem kleinen Bild links) und zwei Divs (einer Maskenebene und einem Div mit einem großen Bild rechts). Von diesen drei Elementen wird standardmäßig nur das kleine Bild links angezeigt, und die andere Maskenebene und das große Bild sind standardmäßig ausgeblendet (d. h. Anzeige: keine;), und die Maskenebene und das große Bild werden durch Positionierung (untergeordnet und übergeordnet) an der entsprechenden Position platziert. Hierbei ist zu beachten, dass dem Z-Index des großen Bilds rechts ein Wert zugewiesen werden muss, da im Allgemeinen der ursprüngliche Bereich des großen Bilds rechts Inhalt anzeigt und das große Bild darunter gedrückt werden kann, sodass die Hierarchie erwähnt werden sollte.

2. CSS-Stilteil: Der Stil kann gemäß dem allgemeinen Stil angegeben werden. Das einzige, worauf Sie achten müssen, ist, dass dem Bild im großen Bild eine absolute Position von position: absolute; zugewiesen werden sollte, damit der JS-Teil die Position des Bildes nach links und oben verschieben kann, um den Effekt zu erzielen, dass sich das große Bild mit der Bewegung der Maus im kleinen Bild bewegt.

3. JavaScript -Teil: Mausereignisse (Onmouseover), Mausereignisse (Onmouseout) und Mausereignisse (OnmousEmove), wenn Sie in AddEventListener () geschrieben sind, ist nicht erforderlich, und die Mausereignisse sind die Mausereignisse auf dem Outer -Loch -Box (IN. Block;), und wenn die Mausblätter versteckt sind (dh Display: keine Mausereignisse in. Die Mauskoordinaten werden verwendet, um die Position der Maskenschicht zu bestimmen. Die Maus sollte sich in der Mitte der Maskenschicht befinden, sodass die erhaltenen Mauskoordinaten nach der Hälfte der Höhe und der Breite der Maskenschicht nach unten und nach rechts nach unten bewegt werden sollten, so dass die erhaltenen Koordinatenwerte der Maskenschicht zugeordnet sind (die Koordinaten der oberen linken Ecke der Maskenschicht).

4. Die Maskenebene kann mit der Maus bewegt werden, aber es gibt noch einen weiteren Punkt: Der Bewegungsbereich der Maskenebene sollte begrenzt sein und darf die übergeordnete Box nicht überschreiten. Daher sollte eine Beurteilung hinzugefügt werden. Wenn sich die Maskenebene nach links auf 0 bewegt, kann sie sich nicht weiter bewegen, und wie weit sie sich nach rechts bewegen kann, wird tatsächlich durch die Breite der rechten Maskenebene und ihrer übergeordneten Box (dh Box) bestimmt, da der Bewegungsbereich der Maskenebene von 0 bis (Box.OffsetWidth - Mask.OffsetWidth) reicht, d. h. 0 bis zur Breite der übergeordneten Box minus der Breite der Maskenebene.

5. Die Maskenebene kann normal verschoben werden und der Bereich ist ebenfalls begrenzt. Als nächstes wird das große Bild rechts angezeigt. Hier entwerfen wir hauptsächlich einen Algorithmus , nämlich:

Denn die Bewegung des großen Bildes und die Bewegung der Maskenebene sind eigentlich proportional , d. h. das große Bild bewegt sich genauso viel wie die Maskenebene (wenn sich beispielsweise die Maskenebene um 1 Pixel und das große Bild um 2 Pixel bewegt, dann sollte sich das große Bild um 4 Pixel bewegen, wenn sich die Maskenebene um 2 Pixel bewegt). Aus dieser Formel können wir die entsprechenden Distanzdaten abrufen, um die sich das große Bild bewegen sollte, wenn sich das kleine Bild bewegt, und diese Daten dann dem großen Bild rechts zuweisen (d. h. dem Bild unter dem Div) und die Position des Symbols über style.left und style.top ändern (der Hauptwert sollte mit der Einheit px hinzugefügt werden). Beachten Sie jedoch, dass die Bewegung des großen Bildes und die Bewegung der Maskenebene eigentlich entgegengesetzt sind . Wenn sich beispielsweise die Maskenebene nach rechts bewegt, bewegt sich das große Bild tatsächlich nach links (da sich das große Bild nach links bewegen muss, um seinen rechten Bereich anzuzeigen), daher sollten die links und oben zugewiesenen Werte mit einem negativen Vorzeichen hinzugefügt werden.

Hier werden im Wesentlichen die grundlegenden Kenntnisse und Vorsichtsmaßnahmen vorgestellt, die in diesem Fall erforderlich sind. Es wird empfohlen, den Code (einschließlich detaillierter Kommentare) zu kombinieren, um die Programmierschritte und Implementierungsideen klarer zu erkennen. In diesem Fall wird reiner JS-Code als Grundlage verwendet (es gibt also viele Bereiche, die optimiert werden können). Es gibt vielleicht bessere und einfachere Möglichkeiten, diese Funktion zu implementieren, aber die Verwendung der grundlegendsten JS-Codeimplementierung kann Ihnen dabei helfen, den Kerncode und den Algorithmus besser zu verstehen.

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.