Share
In deze tutorial hebben we wat plezier met JavaScript-muisevenementen door iets nuttigs en interessants te maken: miniaturen die, wanneer erover zweefde, een selectie van verschillende e-boeken weergeven.
Hier is de demo die we gaan bouwen (beweeg de muis over elke miniatuur):
Elke miniatuur geeft de bijbehorende e-boeken weer die eronder verborgen zijn, afhankelijk van de cursorpositie. Het is een ideale manier om een voorproefje te geven van wat er beschikbaar is (in dit geval in de Envato Tuts + e-boekenbibliotheek).
Terwijl we dit bouwen, gebruiken we CSS Grid Layout en JavaScript mousemove evenement, onder andere dingen.
De markup die we zullen gebruiken is vrij eenvoudig; een ongeordende ongeordende lijst met enkele even grote afbeeldingen in elk van de lijstitems (kaarten).
Wat de CSS-stijlen betreft, zijn twee dingen belangrijk:
Accentsconagua
Breedte: 25%. In plaats van een CSS-raster, kunt u de flexbox of de lay-outmethode van uw voorkeur gebruiken.De CSS-regels die we toepassen op onze demo, worden hieronder weergegeven:
.kaarten display: grid; grid-gap: 20px; rooster-sjabloon-kolommen: herhaling (4, 1fr); .card positie: relatief; vakschaduw: 0 3px 6px rgba (0, 0, 0, 0,5); .card: hover cursor: pointer; .card img: not (: first-of-type) position: absolute; boven: 0; rechts: 0; onderkant: 0; links: 0; dekking: 0; .card img.is-visible opacity: 1;
Met een aantal andere reset-stijlen (het verwijderen van de opsommingstekens uit de ongeordende lijst, het geven van een achtergrondkleur aan het lichaam, enz.) Komen we hier achter:
Laten we de volgende twee regels toevoegen, zodat wanneer alle pagina-items gereed zijn, de in het functie wordt uitgevoerd. We zullen het ook activeren telkens wanneer het formaat van het browservenster wordt gewijzigd.
window.addEventListener ("load", init); window.addEventListener ("resize", init);Binnen deze functie gebeuren een aantal dingen; eerst doorlopen we de kaarten.
function init () const kaarten = document.querySelectorAll (". card"); cards.forEach (el => // actions here); Vervolgens halen we voor elke kaart het aantal onderliggende afbeeldingen op zonder rekening te houden met de eerste afbeelding.
Notitie: eerste afbeelding is standaard zichtbaar en niet absoluut gepositioneerd.
const numOfChildImages = el.querySelectorAll ("img: not (: first-of-type)"). length;Als er ten minste één onderliggende afbeelding is, doen we het volgende:
if (numOfChildImages> 0) const width = el.getBoundingClientRect (); const parts = width / numOfChildImages;
Laten we, om dit beter te begrijpen, aannemen dat onze eerste kaart 235 px breed is. Deze kaart bevat vier afbeeldingen (onthoud dat we de eerste afbeelding negeren), dus de indeling 235px / 4 geeft ons 58,75 pixels. Dus wat is de rol van dit nummer? Nou, het maakt ons bereik, dus bij het zweven van de kaart volgen we de X-positie van de muis, controleren we het bereik en geven we tenslotte de juiste afbeelding weer.
Voor ons eenvoudige voorbeeld, hier zijn de gegenereerde ranges:
| Muis X-positie | Afbeelding om te tonen |
|---|---|
| 0 | 1 |
| 58.75px | 2e |
| 117.5px | 3e |
176.25px| 4e | |
Let op: de kolom "Afbeelding om te tonen" toont de afbeelding die moet verschijnen in de pool van de vier onderliggende afbeeldingen (nogmaals sluiten we de eerste zichtbare afbeelding uit).
Nu we de vereisten kennen, laten we ze vertalen in code. Nog steeds binnen de lus luisteren we naar de mousemove evenement.
// zwevende kaarten el.addEventListener ("mousemove", e => // hier dingen doen);Wanneer dit evenement wordt geactiveerd, voeren we de volgende acties uit:
is zichtbaar klasse van alle kaartafbeeldingen.Een deel van de code die het bovengenoemde gedrag implementeert is als volgt:
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 > parts && xPos <= parts * 2) addClass(el, "img:nth-child(3)"); break; // more cases below );Zoals u kunt zien, zijn er twee aangepaste functies. Ten eerste, de removeIsVisibleClass functie die verantwoordelijk is voor het verwijderen van de is zichtbaar klasse van de overeenkomstige afbeelding. Ten tweede, hoe algemener addClass functie die verantwoordelijk is voor het toevoegen van de is zichtbaar klasse naar de doelafbeelding.
Dit is hun handtekening:
function removeIsVisibleClass () if (document.querySelector ("img.is-visible")) document.querySelector ("img.is-visible"). classList.remove ("is-visible"); functie addClass (parent, child, className = "is-visible") parent.querySelector (child) .classList.add (className); Tot nu toe hebben we gezien wat er gebeurt elke keer dat we over een kaart zweven. Laten we nu het tegenovergestelde scenario bespreken. Met andere woorden, wat zou er moeten gebeuren als wij hou op zwevend boven een kaart. In dit geval moet de eerste beginafbeelding worden weergegeven:
// inside cards loop el.addEventListener ("mouseleave", () => removeIsVisibleClass ();); Onze demo zou goed moeten werken in de meeste desktopbrowsers. Een paar opmerkingen echter:
foreach loop die niet door alle browsers worden ondersteund. Er zijn alternatieve oplossingen voor beide gevallen als u liever een fallback gebruikt.Ten slotte gebruiken we zoals gewoonlijk Babel om de ES6-code te compileren tot ES5.
In deze zelfstudie hebben we een interessant hovereffect weten te bouwen door gebruik te maken van JavaScript-muisevenementen. Hopelijk ben je genoeg geïnspireerd om iets geweldigs te bouwen.
Om verder te gaan, moedig ik u aan om een herbruikbare functie te bouwen die de herhalende code in de schakelaar uitspraak. Plaats een reactie als je de uitdaging aangaat!
