Share
În acest tutorial vom avea niște distracții cu evenimentele mouse-ului JavaScript construind ceva util și interesant: miniaturile care, atunci când se plimbă peste, afișează o selecție de cărți electronice diferite.
Iată demo-ul pe care îl vom construi (deplasați mouse-ul peste fiecare miniatură):
Fiecare miniatură afișează cărțile electronice corespunzătoare ascunse dedesubt, în funcție de poziția cursorului. Este un mod ideal de a oferi o previzualizare sneak a ceea ce este disponibil (în acest caz, în biblioteca Envato Tuts + ebook).
Pe măsură ce construim acest lucru vom folosi CSS Grid Layout și JavaScript mousemove eveniment, printre altele.
Marcajul pe care îl vom folosi este destul de simplu; o listă neordonată cu imagini de dimensiuni egale în interiorul fiecărui element din listă (carduri).
Acum, în ceea ce privește stilurile CSS, două lucruri sunt importante:
Accentsconagua
lățime: 25%. În loc de grila CSS, puteți utiliza flexbox sau metoda preferată de aspect.Regulile CSS pe care le aplicăm demo-ului nostru sunt prezentate mai jos:
.carduri display: grilă; grilă-decalaj: 20 pixeli; grilă-șablon-coloane: repeat (4, 1fr); . carte poziție: relativă; box-shadow: 0 3px 6px rgba (0, 0, 0, 0.5); .card: hover (cursor: pointer; .card img: nu (: primul de tip) position: absolute; top: 0; dreapta: 0; fund: 0; stânga: 0; opacitate: 0; .card img.is-vizibil opacitate: 1;
Cu câteva alte stiluri de resetare (eliminarea gloanțelor din lista neordonată, dând organismului o culoare de fundal etc.), ajungem la următoarea:
Să adăugăm următoarele două linii astfel încât, atunci când toate activele paginii sunt gata, init funcția este executată. De asemenea, o vom declanșa de fiecare dată când fereastra browserului este redimensionată.
window.addEventListener ("încărcare", init); window.addEventListener ("redimensionare", init);În interiorul acestei funcții se întâmplă o serie de lucruri; mai intai prin buzunar.
funcția init () const carduri = document.querySelectorAll (". carte"); cards.forEach (el => // acțiuni aici); Apoi, pentru fiecare card vom recupera numărul de imagini copil fără a lua în considerare prima imagine.
Notă: prima imagine este vizibilă în mod prestabilit și nu este absolut poziționată.
const numOfChildImages = el.querySelectorAll ("img: not (: first-of-type)").Dacă există cel puțin o imagine copil, facem următoarele lucruri:
dacă numOfChildImages> 0) const width = el.getBoundingClientRect (); const părți = lățime / numOfChildImages;
Pentru a înțelege mai bine acest lucru, să presupunem că prima noastră carte are o lățime de 235 pixeli. Acest card conține patru imagini (rețineți că ignorăm prima imagine), astfel încât diviziunea 235px / 4 ne va da 58.75px. Deci, care este rolul acestui număr? Ei bine, creează intervalele noastre, așa că, după ce am plasat cartonașul, urmărim poziția X a mouse-ului, verificăm intervalul și afișăm în final imaginea potrivită.
Pentru exemplul nostru simplu, aici sunt gamele generate:
| Poziția X a mouse-ului | Imagine pentru a afișa |
|---|---|
| 0 | 1 |
| 58.75px | a 2- |
| 117.5px | a 3- |
176.25px| 4a | |
Rețineți că în coloana "Imagine la afișare" apare imaginea care ar trebui să apară din grupul celor patru imagini copil (din nou excludem prima imagine vizibilă).
Acum că știm cerințele, să le traducem în cod. Încă în interiorul bucla pe care o ascultăm mousemove eveniment.
// hover cards el.addEventListener ("mousemove", e => // face lucrurile aici);Când se produce acest eveniment, efectuăm următoarele acțiuni:
este vizibil din toate imaginile de pe card.Parte din codul care implementează comportamentul menționat mai sus este după cum urmează:
el.addEventListener ("mousemove", e => // 1 const xPos = e.pageX - el.offsetLeft; // 2 removeIsVisibleClass (); // 3 comutator (numOfChildImages) caz 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 > piese && xPos <= parts * 2) addClass(el, "img:nth-child(3)"); break; // more cases below );După cum puteți vedea, există două funcții personalizate. În primul rând, removeIsVisibleClass funcția care este responsabilă pentru eliminarea este vizibil clasă din imaginea corespunzătoare. În al doilea rând, cu cât sunt mai generale addClass funcție care este responsabilă pentru adăugarea este vizibil clasa la imaginea țintă.
Iată semnătura lor:
funcția removeIsVisibleClass () if (document.querySelector ("img.is-visible")) document.querySelector ("img.is -visible") classList.remove ("este vizibil"); addClass (părinte, copil, className = "este vizibil") parent.querySelector (copil) .classList.add (className); Până acum, am văzut ce se întâmplă de fiecare dată când plasăm cu mouse-ul peste un card. Să discutăm acum scenariul opus. Cu alte cuvinte, ce ar trebui să se întâmple dacă noi Stop se plimba pe un card. În acest caz, ar trebui afișată prima imagine inițială:
// în interiorul cărților loop el.addEventListener ("mouseleave", () => removeIsVisibleClass ();); Demo-ul nostru ar trebui să funcționeze bine în majoritatea browserelor desktop. Câteva note:
pentru fiecare care nu sunt acceptate de toate browserele. Există soluții alternative pentru ambele cazuri dacă preferați să utilizați o alternativă.În cele din urmă, ca de obicei, folosim Babel pentru a compila codul ES6 până la ES5.
În acest tutorial, am reușit să construim un efect de hover interesant, profitând de evenimentele mouse-ului JavaScript. Sperăm că ați fost inspirați suficient pentru a construi ceva uimitor.
Pentru a face lucrurile mai departe, vă încurajez să construiți o funcție reutilizabilă care să se ocupe de codul repetitiv din interior intrerupator afirmație. Postați un comentariu dacă luați provocarea!
