Slik lager du flere forhåndsvisning miniatyrer med JavaScript Mouse Events

I denne opplæringen vil vi ha det gøy med JavaScript-museversjoner ved å bygge noe nyttig og interessant: miniatyrer som, når de svinger over, viser et utvalg forskjellige eBøker.

Her er den demoen vi skal bygge (flytt musen over hver miniatyrbilde):

Hver miniatyrbilde viser de tilhørende ebøkene skjult under, avhengig av markørposisjonen. Det er en ideell måte å gi et snikksempel på hva som er tilgjengelig (i dette tilfellet i Envato Tuts + eBok-biblioteket).

Når vi bygger dette bruker vi CSS Grid Layout og JavaScript mousemove arrangement, blant annet.

1. HTML Markup

Markeringen vi skal bruke er ganske enkel; en vanlig uordnet liste med noen like store bilder inne i hver av listepostene (kortene). 

2. CSS

Nå, med hensyn til CSS-stilene, er to ting viktige:

• Vi definerer den uordnede listen som en rutenettbeholder og gir listepostene bredde: 25%.  I stedet for CSS-nett kan du bruke flexbox eller din foretrukne layoutmetode.
• Vi skjuler visuelt og plasserer absolutt alle bildene i listepostene, bortsett fra den første.

CSS-reglene som gjelder for vår demo, vises nedenfor:

.kort display: grid; grid-gap: 20px; Rutenett-mal-kolonner: Gjenta (4, 1fr);  .card posisjon: relative; boks-skygge: 0 3px 6px rgba (0, 0, 0, 0,5);  .card: hover cursor: pointer;  .card img: not (: first-of-type) posisjon: absolutt; topp: 0; høyre: 0; bunn: 0; venstre: 0; opasitet: 0;  .card img.is-visible opacity: 1; 

Med et par andre tilbakestillede stiler (fjerner kulene fra den uordnede listen, gir kroppen en bakgrunnsfarge etc.), slutter vi med dette:

3. JavaScript

La oss legge til følgende to linjer, slik at når alle sidebildene er klare, i det funksjonen utføres. Vi vil også utløse det hver gang nettleservinduet endres.

window.addEventListener ("load", init); window.addEventListener ("resize", init);

Innenfor denne funksjonen skjer en rekke ting; Først gikk vi gjennom kortene.

funksjon init () const cards = document.querySelectorAll (".kort"); cards.forEach (el => // handlinger her); 

Loop Child Images

Deretter henter vi for hvert kort antall barnbilder uten å ta hensyn til det første bildet. 

Merk: Første bilde er synlig som standard og ikke helt posisjonert. 

const numOfChildImages = el.querySelectorAll ("img: not (: first-of-type)"). lengde;

Hvis det er minst ett barns bilde, gjør vi følgende:

• Beregn bredden på kortet (bredden på det første bildet) og ...
• ... dele kortet i like deler ved å dele bredden med antall barnbilder.

hvis (numOfChildImages> 0) const width = el.getBoundingClientRect (); const deler = bredde / numOfChildImages; 

For å bedre forstå dette, la oss anta at vårt første kort er 235 px bredt. Dette kortet inneholder fire bilder (husk vi ignorerer det første bildet), slik at divisjonen 235px / 4 gir oss 58.75px. Så hva er rollen til dette nummeret? Vel, det skaper våre intervaller, så ved korthenger, sporer vi musens X-posisjon, kontrollerer rekkevidden, og viser til slutt det riktige bildet.

For vårt enkle eksempel, her er de genererte områdene:

Vær oppmerksom på at "Image to Show" -kolonnen viser bildet som skal vises fra bassenget på fire barns bilder (igjen utelukker vi det første synlige bildet).

Nå som vi kjenner kravene, la oss oversette dem til kode. Fortsatt inne i løkken vi lytter etter mousemove begivenhet.

// hover-kort el.addEventListener ("mousemove", e => // gjør ting her);

Når denne hendelsen brenner, utfører vi følgende handlinger:

1. Få X-koordinaten til musepekeren i forhold til "hovered" -kortet og ikke i forhold til nettleservinduet.
2. Fjern er-synlige klasse fra alle kortbilder.
3. Vis riktig bilde avhengig av museposisjonen (se forrige tabell for et eksempel). 

En del av koden som implementerer den nevnte oppførselen er som følger:

el.addEventListener ("mousemove", e => // 1 const xPos = e.pageX - el.offsetLeft; // 2 removeIsVisibleClass (); // 3 switch (numOfChildImages) tilfelle 1: hvis (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 > deler && xPos <= parts * 2)  addClass(el, "img:nth-child(3)");  break; // more cases below  );

Som du kan se, er det to tilpassede funksjoner. For det første, removeIsVisibleClass funksjon som er ansvarlig for å fjerne er-synlige klasse fra det tilsvarende bildet. For det andre, jo mer generell addClass funksjon som er ansvarlig for å legge til er-synlige klasse til målbildet. 

Her er deres signatur:

funksjon removeIsVisibleClass () if (document.querySelector ("img.is-visible")) document.querySelector ("img.is-visible"). classList.remove ("er synlig");  funksjon addClass (foreldre, barn, className = "er synlig") parent.querySelector (child) .classList.add (klassenavn); 

Så langt har vi sett hva som skjer hver gang vi svinger over et kort. La oss nå diskutere det motsatte scenariet. Med andre ord, hva skal skje hvis vi Stoppe svinger over et kort. I dette tilfellet skal første første bilde vises:

// innvendige kortsløyfe el.addEventListener ("mouseleave", () => removeIsVisibleClass (););

4. Nettleserstøtte

Vår demo skal fungere godt i de fleste nettlesere. Noen få notater skjønt:

• Demoen bruker CSS Grid og for hver sløyfe som ikke støttes av alle nettlesere. Det finnes alternative løsninger for begge tilfeller hvis du foretrekker å bruke en tilbakebetaling.
• Demoen fungerer på samme måte på alle skjermer / enheter og er ikke optimalisert for små skjermer / berøringsenheter. For vår enkle demo er det bra, men i et virkelig prosjekt kan du kanskje begrense denne implementeringen kun til større skjermer (eller ikke-berøringsenheter).

Til slutt bruker vi som vanlig Babel å kompilere ES6-koden ned til ES5.

Konklusjon

I denne opplæringen klarte vi å bygge en interessant hover-effekt ved å utnytte JavaScript-musenes hendelser. Forhåpentligvis har du blitt inspirert til å bygge noe fantastisk. 

For å ta ting videre, oppfordrer jeg deg til å bygge en gjenbrukbar funksjon som håndterer den repeterende koden inne i bytte om uttalelse. Legg inn en kommentar hvis du tar utfordringen på!