Share
Dans ce didacticiel, nous allons nous amuser avec les événements de souris JavaScript en construisant quelque chose d’utile et d’intéressant: des vignettes qui, lorsqu'elles sont survolées, affichent une sélection de différents livres électroniques..
Voici la démo que nous allons construire (déplacez la souris sur chaque vignette):
Chaque vignette affiche les ebooks correspondants cachés en dessous, en fonction de la position du curseur. C'est un moyen idéal de donner un aperçu de ce qui est disponible (dans la bibliothèque Envato Tuts + ebook).
Au fur et à mesure que nous construirons cela, nous utiliserons CSS Grid Layout et JavaScript. déplacer la souris événement, entre autres.
Le balisage que nous allons utiliser est assez simple. une liste non ordonnée avec des images de taille égale dans chacun des éléments de la liste (cartes).
Maintenant, en ce qui concerne les styles CSS, deux choses sont importantes:
Accentsconagua
largeur: 25%. Au lieu d'une grille CSS, vous pouvez utiliser flexbox ou votre méthode de présentation préférée..Les règles CSS que nous appliquons à notre démo sont indiquées ci-dessous:
.cartes display: grid; intervalle de grille: 20px; Grille-modèle-colonnes: répéter (4, 1fr); .card position: relative; boîte-ombre: 0 3px 6px rgba (0, 0, 0, 0,5); .card: survoler curseur: pointeur; .card img: not (: premier du type) position: absolute; en haut: 0; à droite: 0; en bas: 0; gauche: 0; opacité: 0; .card img.is-visible opacité: 1;
Avec quelques autres styles de réinitialisation (suppression des puces de la liste non ordonnée, attribution d'une couleur de fond au corps, etc.), nous obtenons ceci:
Ajoutons les deux lignes suivantes pour que, lorsque tous les éléments de la page soient prêts, le init la fonction est exécutée. Nous allons également le déclencher à chaque fois que la fenêtre du navigateur est redimensionnée.
window.addEventListener ("load", init); window.addEventListener ("resize", init);Dans cette fonction, un certain nombre de choses se passent. d'abord nous parcourons les cartes.
function init () const cartes = document.querySelectorAll (". carte"); cards.forEach (el => // actions here); Ensuite, pour chaque carte, nous récupérons le nombre d'images enfants sans prendre en compte la première image..
Remarque: la première image est visible par défaut et pas absolument positionnée.
const numOfChildImages = el.querySelectorAll ("img: not (: premier-de-type)"). length;S'il y a au moins une image enfant, nous effectuons les tâches suivantes:
if (numOfChildImages> 0) const width = el.getBoundingClientRect (); const parts = width / numOfChildImages;
Pour mieux comprendre cela, supposons que notre première carte mesure 235 pixels de large. Cette carte contient quatre images (n'oubliez pas que nous ignorons la première image), donc la division 235px / 4 nous donnera 58,75px. Alors, quel est le rôle de ce nombre? Eh bien, il crée nos plages, alors lors du survol de la carte, nous suivons la position X de la souris, vérifions sa plage et finalement affichons l'image appropriée..
Pour notre exemple simple, voici les plages générées:
| Souris x position | Image à montrer |
|---|---|
| 0 | 1er |
| 58.75px | 2ème |
| 117,5px | 3ème |
176.25px| 4ème | |
Veuillez noter que la colonne "Image à afficher" indique l'image qui doit apparaître dans le pool des quatre images enfants (une fois encore, nous excluons la première image visible)..
Maintenant que nous connaissons les exigences, traduisons-les en code. Toujours dans la boucle, nous écoutons le déplacer la souris un événement.
// passe les cartes el.addEventListener ("mousemove", e => // faire des choses ici);Lorsque cet événement se déclenche, nous effectuons les actions suivantes:
est visible classe de toutes les images de cartes.Une partie du code qui implémente le comportement susmentionné est la suivante:
el.addEventListener ("mousemove", e => // 1 const xPos = e.pageX - el.offsetLeft; // 2 removeIsVisibleClass (); // 3 switch (numOfChildImages) cas 1: si (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 > parties && xPos <= parts * 2) addClass(el, "img:nth-child(3)"); break; // more cases below );Comme vous pouvez le constater, il existe deux fonctions personnalisées. Tout d'abord, le removeIsVisibleClass fonction qui est responsable de la suppression de la est visible classe de l'image correspondante. Deuxièmement, le plus général addClass fonction qui est responsable de l'ajout de la est visible classe à l'image cible.
Voici leur signature:
function removeIsVisibleClass () if (document.querySelector ("img.is-visible")) document.querySelector ("img.is-visible"). classList.remove ("is-visible"); function addClass (parent, enfant, className = "est visible") parent.querySelector (child) .classList.add (className); Jusqu'à présent, nous avons vu ce qui se passe chaque fois que nous survolons une carte. Parlons maintenant du scénario opposé. En d'autres termes, que devrait-il se passer si nous Arrêtez survolant une carte. Dans ce cas, la première image initiale doit être affichée:
// boucle de cartes interne el.addEventListener ("mouseleave", () => removeIsVisibleClass ();); Notre démo devrait bien fonctionner dans la plupart des navigateurs de bureau. Quelques notes cependant:
pour chaque boucle qui ne sont pas supportés par tous les navigateurs. Il existe des solutions alternatives pour les deux cas si vous préférez utiliser une solution de secours..Enfin, comme d'habitude, nous utilisons Babel pour compiler le code ES6 jusqu'à ES5.
Dans ce tutoriel, nous avons réussi à créer un effet de survol intéressant en tirant parti des événements de souris JavaScript. J'espère que vous avez été suffisamment inspiré pour construire quelque chose d'extraordinaire.
Pour aller plus loin, je vous encourage à construire une fonction réutilisable qui gérera le code répétitif dans la commutateur déclaration. Postez un commentaire si vous relevez le défi!
