Share
In questo tutorial ci divertiremo un po 'con gli eventi del mouse JavaScript creando qualcosa di utile e interessante: le miniature che, al passaggio del mouse, mostrano una selezione di ebook diversi.
Ecco la demo che stiamo per costruire (sposta il mouse su ciascuna miniatura):
Ogni miniatura mostra gli ebook corrispondenti nascosti sotto, a seconda della posizione del cursore. È un modo ideale per dare un'anteprima di ciò che è disponibile (in questo caso nella libreria di ebook Envato Tuts +).
Mentre lo sviluppiamo, utilizzeremo il layout griglia CSS e il codice JavaScript MouseMove evento, tra le altre cose.
Il markup che useremo è piuttosto semplice; una semplice lista non ordinata con alcune immagini di uguali dimensioni all'interno di ciascuna delle voci dell'elenco (carte).
Ora, per quanto riguarda gli stili CSS, due cose sono importanti:
Accentsconagua
Larghezza: 25%. Invece della griglia CSS, è possibile utilizzare flexbox o il metodo di layout preferito.Le regole CSS che applichiamo alla nostra demo sono mostrate di seguito:
.carte display: griglia; intercapedine: 20px; grid-template-columns: repeat (4, 1fr); .card position: relative; box-shadow: 0 3px 6px rgba (0, 0, 0, 0.5); .card: hover cursor: pointer; .card img: not (: first-of-type) position: absolute; inizio: 0; a destra: 0; fondo: 0; a sinistra: 0; opacità: 0; .card img.is-visible opacity: 1;
Con un paio di altri stili di reset (rimuovendo i proiettili dalla lista non ordinata, dando al corpo un colore di sfondo ecc.) Finiamo con questo:
Aggiungiamo le seguenti due righe in modo che quando tutte le risorse della pagina sono pronte, il dentro la funzione è eseguita. Lo attiveremo anche ogni volta che la finestra del browser viene ridimensionata.
window.addEventListener ("load", init); window.addEventListener ("ridimensiona", init);All'interno di questa funzione, accadono molte cose; per prima cosa passiamo attraverso le carte.
function init () const cards = document.querySelectorAll (". card"); cards.forEach (el => // actions here); Successivamente, per ogni scheda recuperiamo il numero di immagini figlio senza tenere conto della prima immagine.
Nota: la prima immagine è visibile per impostazione predefinita e non posizionata in modo assoluto.
const numOfChildImages = el.querySelectorAll ("img: not (: first-of-type)"). length;Se è presente almeno un'immagine secondaria, eseguiamo le seguenti operazioni:
if (numOfChildImages> 0) const width = el.getBoundingClientRect (); const parts = width / numOfChildImages;
Per capire meglio questo, supponiamo che la nostra prima carta sia larga 235px. Questa scheda contiene quattro immagini (ricorda che ignoriamo la prima immagine), quindi la divisione 235px / 4 ci darà 58.75px. Quindi qual è il ruolo di questo numero? Bene, crea le nostre gamme, quindi, al passaggio del mouse sulla carta, monitoriamo la posizione del mouse X, controlliamo il suo intervallo e infine visualizziamo l'immagine appropriata.
Per il nostro semplice esempio, ecco gli intervalli generati:
| Posizione X del mouse | Immagine da mostrare |
|---|---|
| 0 | 1 ° |
| 58.75px | 2 ° |
| 117.5px | 3 ° |
176.25px| 4 ° | |
Si prega di notare che la colonna "Immagine da mostrare" mostra l'immagine che dovrebbe apparire dal pool delle quattro immagini figlio (ancora una volta escludiamo la prima immagine visibile).
Ora che conosciamo i requisiti, convertiamoli in codice. Ancora dentro il loop ascoltiamo il MouseMove evento.
// hover cards el.addEventListener ("mousemove", e => // fai cose qui);Quando questo evento si attiva, eseguiamo le seguenti azioni:
è visibile classe da tutte le immagini di carte.Parte del codice che implementa il comportamento di cui sopra è la seguente:
el.addEventListener ("mousemove", e => // 1 const xPos = e.pageX - el.offsetLeft; // 2 removeIsVisibleClass (); // 3 switch (numOfChildImages) caso 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 > parti && xPos <= parts * 2) addClass(el, "img:nth-child(3)"); break; // more cases below );Come puoi vedere, ci sono due funzioni personalizzate. Innanzitutto, il removeIsVisibleClass funzione che è responsabile della rimozione del è visibile classe dall'immagine corrispondente. In secondo luogo, il più generale addClass funzione che è responsabile per l'aggiunta del è visibile classe per l'immagine di destinazione.
Ecco la loro firma:
function removeIsVisibleClass () if (document.querySelector ("img.is-visible")) document.querySelector ("img.is-visible"). classList.remove ("is-visible"); function addClass (parent, child, className = "is-visible") parent.querySelector (child) .classList.add (className); Finora, abbiamo visto cosa succede ogni volta che passiamo il mouse su una carta. Passiamo ora allo scenario opposto. In altre parole, cosa dovrebbe accadere se noi Stop in bilico su una carta. In questo caso dovrebbe essere visualizzata la prima immagine iniziale:
// inside cards loop el.addEventListener ("mouseleave", () => removeIsVisibleClass ();); La nostra demo dovrebbe funzionare bene nella maggior parte dei browser desktop. Alcune note però:
per ciascuno loop che non sono supportati da tutti i browser. Esistono soluzioni alternative per entrambi i casi, se preferisci utilizzare un fallback.Infine, come al solito, usiamo Babel per compilare il codice ES6 fino a ES5.
In questo tutorial, siamo riusciti a creare un effetto hover interessante sfruttando gli eventi del mouse JavaScript. Spero che tu sia stato abbastanza ispirato per costruire qualcosa di straordinario.
Per andare oltre, ti incoraggio a creare una funzione riutilizzabile che gestirà il codice ripetitivo all'interno interruttore dichiarazione. Pubblica un commento se accetti la sfida!
