Share
In diesem Tutorial werden wir etwas Spaß mit JavaScript-Mausereignissen haben, indem wir nützliche und interessante Elemente erstellen: Miniaturansichten, die, wenn Sie mit dem Mauszeiger darüber gehalten werden, eine Auswahl verschiedener E-Books anzeigen.
Hier ist die Demo, die wir bauen werden (bewegen Sie die Maus über jedes Miniaturbild):
Jedes Miniaturbild zeigt die entsprechenden E-Books, die je nach Cursorposition darunter verborgen sind. Dies ist eine ideale Methode, um eine Vorschau auf die verfügbaren Inhalte zu geben (in diesem Fall in der Envato Tuts + Ebook-Bibliothek)..
Während wir dies erstellen, verwenden wir das CSS-Grid-Layout und das JavaScript mousemove Veranstaltung, unter anderem.
Das Markup, das wir verwenden werden, ist ziemlich einfach. eine einfache ungeordnete Liste mit einigen gleich großen Bildern in jedem der Listenelemente (Karten).
In Bezug auf die CSS-Stile sind zwei Dinge wichtig:
Accentsconagua
Breite: 25%. Anstelle des CSS-Gitters können Sie Flexbox oder Ihre bevorzugte Layoutmethode verwenden.Die CSS-Regeln, die wir für unsere Demo anwenden, sind unten aufgeführt:
.Karten Anzeige: Raster; Gitterlücke: 20px; Rastervorlagen-Spalten: Wiederholung (4, 1fr); .card position: relativ; Box-Schatten: 0 3px 6px rgba (0, 0, 0, 0,5); .card: hover Cursor: Zeiger; .card img: nicht (: first-of-type) position: absolut; oben: 0; rechts: 0; unten: 0; links: 0; Deckkraft: 0; .card img.is-visible Deckkraft: 1;
Bei einigen anderen Reset-Styles (Entfernen der Aufzählungszeichen aus der ungeordneten Liste, Hintergrundfarbe des Körpers usw.) haben wir Folgendes:
Fügen wir die folgenden zwei Zeilen hinzu, damit, wenn alle Seitenelemente fertig sind, die drin Funktion wird ausgeführt. Wir werden es auch jedes Mal auslösen, wenn die Größe des Browserfensters geändert wird.
window.addEventListener ("load", init); window.addEventListener ("resize", init);In dieser Funktion passiert eine Reihe von Dingen. Zuerst durchlaufen wir die Karten.
function init () const cards = document.querySelectorAll (". card"); cards.forEach (el => // Aktionen hier); Als Nächstes rufen wir für jede Karte die Anzahl der untergeordneten Bilder ab, ohne das erste Bild zu berücksichtigen.
Hinweis: Das erste Bild ist standardmäßig sichtbar und nicht absolut positioniert.
const numOfChildImages = el.querySelectorAll ("img: not (: first-of-type)"). length;Wenn es mindestens ein untergeordnetes Bild gibt, tun wir Folgendes:
if (numOfChildImages> 0) const width = el.getBoundingClientRect (); konst Teile = width / numOfChildImages;
Um dies besser zu verstehen, nehmen wir an, dass unsere erste Karte 235 Pixel breit ist. Diese Karte enthält vier Bilder (denken Sie daran, dass wir das erste Bild ignorieren). Die Division 235px / 4 ergibt also 58.75px. Was ist die Rolle dieser Nummer? Nun, es erstellt unsere Bereiche. Wenn die Karte bewegt wird, verfolgen wir die X-Position der Maus, überprüfen deren Reichweite und zeigen schließlich das entsprechende Bild an.
Für unser einfaches Beispiel sind hier die generierten Bereiche:
| Maus X-Position | Bild zum Anzeigen |
|---|---|
| 0 | 1 |
| 58,75px | 2. |
| 117,5px | 3. |
176,25px| 4. | |
Bitte beachten Sie, dass in der Spalte "Image to Show" das Bild angezeigt wird, das aus dem Pool der vier untergeordneten Bilder angezeigt werden sollte (erneut schließen wir das erste sichtbare Bild aus)..
Nun, da wir die Anforderungen kennen, übersetzen wir sie in Code. Immer noch in der Schleife lauschen wir dem mousemove Veranstaltung.
// hover cards el.addEventListener ("mousemove", e => // erledige hier);Wenn dieses Ereignis ausgelöst wird, führen wir die folgenden Aktionen aus:
ist sichtbar Klasse von allen Kartenbildern.Ein Teil des Codes, der das oben genannte Verhalten implementiert, lautet wie folgt:
el.addEventListener ("mousemove", e => // 1 const xPos = e.pageX - el.offsetLeft; // 2 removeIsVisibleClass (); // 3 switch (numOfChildImages) case 1: if (xPos> 0 && xPos <= parts) addClass(el, "img:nth-child(2)"); break; case 2: if (xPos > 0 && xPos <= parts) addClass(el, "img:nth-child(2)"); else if (xPos > Teile && xPos <= parts * 2) addClass(el, "img:nth-child(3)"); break; // more cases below );Wie Sie sehen, gibt es zwei benutzerdefinierte Funktionen. Erstens, die removeIsVisibleClass Funktion, die für das Entfernen der verantwortlich ist ist sichtbar Klasse aus dem entsprechenden Bild. Zweitens die allgemeinere addClass Funktion, die für das Hinzufügen von verantwortlich ist ist sichtbar Klasse zum Zielbild.
Hier ist ihre Unterschrift:
function removeIsVisibleClass () if (document.querySelector ("img.is-visible")) document.querySelector ("img.is-visible"). classList.remove ("is-visible"); Funktion addClass (Parent, Child, className = "is-visible") parent.querySelector (Kind) .classList.add (Klassenname); Bis jetzt haben wir gesehen, was jedes Mal passiert, wenn wir über einer Karte schweben. Lassen Sie uns nun das umgekehrte Szenario diskutieren. Mit anderen Worten, was soll passieren, wenn wir halt über einer Karte schweben In diesem Fall sollte das erste Ausgangsbild angezeigt werden:
// in der Kartenschleife el.addEventListener ("mouseleave", () => removeIsVisibleClass ();); Unsere Demo sollte in den meisten Desktop-Browsern gut funktionieren. Ein paar Anmerkungen:
für jeden Schleife, die nicht von allen Browsern unterstützt wird. Für beide Fälle gibt es alternative Lösungen, wenn Sie einen Fallback bevorzugen.Schließlich verwenden wir wie üblich Babel, um den ES6-Code auf ES5 herunterzukompilieren.
In diesem Tutorial ist es uns gelungen, einen interessanten Hover-Effekt aufzubauen, indem Sie JavaScript-Mausereignisse nutzen. Hoffentlich bist du genug inspiriert worden, um etwas Erstaunliches zu bauen.
Um die Dinge noch weiter voranzutreiben, ermutige ich Sie, eine wiederverwendbare Funktion zu erstellen, die den sich wiederholenden Code in der Schalter Aussage. Schreiben Sie einen Kommentar, wenn Sie die Herausforderung annehmen!
