Share
En este tutorial, nos divertiremos con los eventos del mouse de JavaScript mediante la creación de algo útil e interesante: miniaturas que, al pasar el cursor por encima, muestran una selección de diferentes libros electrónicos..
Aquí está la demostración que vamos a construir (mueva el mouse sobre cada miniatura):
Cada miniatura muestra los libros electrónicos correspondientes ocultos debajo, según la posición del cursor. Es una forma ideal de dar una vista previa de lo que está disponible (en este caso, en la biblioteca de libros electrónicos Envato Tuts +).
Mientras construimos esto, usaremos CSS Grid Layout y el JavaScript movimiento del ratón evento, entre otras cosas.
El marcado que usaremos es bastante sencillo; una lista simple sin ordenar con algunas imágenes de igual tamaño dentro de cada uno de los elementos de la lista (tarjetas).
Ahora, con respecto a los estilos CSS, dos cosas son importantes:
Accentsconagua
ancho: 25%. En lugar de la cuadrícula de CSS, podría usar flexbox o su método de diseño preferido.Las reglas de CSS que aplicamos a nuestra demostración se muestran a continuación:
.tarjetas display: grid; rejilla: 20px; cuadrícula-plantilla-columnas: repetir (4, 1fr); .card posición: relativo; caja-sombra: 0 3px 6px rgba (0, 0, 0, 0.5); .card: hover cursor: puntero; .card img: not (: first-of-type) position: absolute; arriba: 0; derecha: 0; abajo: 0; izquierda: 0; opacidad: 0; .card img.is-visible opacidad: 1;
Con un par de otros estilos de reinicio (eliminando las viñetas de la lista desordenada, dándole al cuerpo un color de fondo, etc.) terminamos con esto:
Agreguemos las siguientes dos líneas para que cuando todos los recursos de la página estén listos, en eso se ejecuta la funcion También lo activaremos cada vez que se cambie el tamaño de la ventana del navegador..
window.addEventListener ("load", init); window.addEventListener ("resize", init);Dentro de esta función, suceden varias cosas; Primero repasamos las cartas.
function init () const cards = document.querySelectorAll (". card"); cards.forEach (el => // acciones aquí); A continuación, para cada tarjeta, recuperamos el número de imágenes secundarias sin tener en cuenta la primera imagen..
Nota: la primera imagen es visible por defecto y no está posicionada absolutamente.
const numOfChildImages = el.querySelectorAll ("img: not (: first-of-type)"). length;Si hay al menos una imagen infantil, hacemos lo siguiente:
if (numOfChildImages> 0) const width = el.getBoundingClientRect (); const parts = width / numOfChildImages;
Para comprender mejor esto, supongamos que nuestra primera tarjeta es de 235px de ancho. Esta tarjeta contiene cuatro imágenes (recuerde que ignoramos la primera imagen), por lo que la división 235px / 4 nos dará 58.75px. Entonces, ¿cuál es el papel de este número? Bueno, crea nuestros rangos, así que al pasar la tarjeta, rastreamos la posición X del mouse, verificamos su rango y finalmente mostramos la imagen apropiada.
Para nuestro ejemplo simple, aquí están los rangos generados:
| Posición del ratón X | Imagen para mostrar |
|---|---|
| 0 | 1º |
| 58.75px | 2do |
| 117.5px | 3er |
176.25px| Cuarto | |
Tenga en cuenta que la columna "Imagen para mostrar" muestra la imagen que debe aparecer en el grupo de las cuatro imágenes secundarias (una vez más, excluimos la primera imagen visible).
Ahora que conocemos los requisitos, vamos a traducirlos en código. Todavía dentro del bucle escuchamos por el movimiento del ratón evento.
// hover cards el.addEventListener ("mousemove", e => // hacer cosas aquí);Cuando este evento se dispara, realizamos las siguientes acciones:
es visible clase de todas las imágenes de tarjetas.Parte del código que implementa el comportamiento mencionado anteriormente es el siguiente:
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 > parts && xPos <= parts * 2) addClass(el, "img:nth-child(3)"); break; // more cases below );Como puedes ver, hay dos funciones personalizadas. En primer lugar, el removeIsVisibleClass función que es responsable de eliminar la es visible clase de la imagen correspondiente. En segundo lugar, el más general. addClass función que es responsable de añadir el es visible clase a la imagen de destino.
Aquí está su 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); Hasta ahora, hemos visto lo que sucede cada vez que pasamos el mouse sobre una tarjeta. Vamos a discutir ahora el escenario opuesto. En otras palabras, ¿qué debería pasar si detener flotando sobre una carta. En este caso se debe mostrar la primera imagen inicial:
// dentro de las tarjetas coloca el.addEventListener ("mouseleave", () => removeIsVisibleClass ();); Nuestra demostración debería funcionar bien en la mayoría de los navegadores de escritorio. Algunas notas sin embargo:
para cada Bucle que no es compatible con todos los navegadores. Existen soluciones alternativas para ambos casos si prefiere utilizar un respaldo..Finalmente, como de costumbre, usamos Babel para compilar el código ES6 hasta ES5.
En este tutorial, logramos crear un efecto de desplazamiento interesante aprovechando los eventos del mouse de JavaScript. Esperemos que hayas sido lo suficientemente inspirado para construir algo increíble..
Para llevar las cosas más lejos, te animo a que construyas una función reutilizable que maneje el código repetitivo dentro de la cambiar declaración. Publica un comentario si aceptas el reto.!
