Muchas tiendas en línea y sitios web de comercio electrónico utilizan un pequeño panel de detalles para ofrecer más información sobre un producto. Lo recuerdo desde los primeros días de navegar por Template Monster, y se ha convertido en una tendencia común para los diseñadores web modernos.
En este tutorial me gustaría explicar cómo podemos duplicar este efecto usando un código muy básico. He proporcionado dos versiones diferentes, una basada en jQuery y otra creada con CSS3. Hay beneficios para cada uno y puede descargar una copia de mi código de tutorial para ver cuál prefiere.
Demo de jQuery - Demo de CSS3 - Descargar código fuente
Estructurando la pagina
Mi versión jQuery tiene una configuración HTML ligeramente diferente a la adaptación CSS3. Obviamente, necesitaremos una copia de la biblioteca jQuery, pero aún más importante es el manejo del panel de detalles. Con JS estoy llamando a un solo elemento HTML para reemplazar el contenido HTML interno. CSS3 requiere elementos div únicos al lado de cada uno de los enlaces de miniaturas, y por lo tanto agrega más volumen a su página.
Este código se encuentra en el cuerpo de mi versión jQuery. Las miniaturas se dividen en elementos de lista donde extraemos información para el panel de detalles de los atributos HTML. Estos detalles se pueden encontrar en el enlace de anclaje, la etiqueta de imagen y una meta etiqueta relacionada que contiene la descripción del contenido. También estoy usando un atributo de datos HTML5 para la fecha de publicación.
Hacia el fondo notará un solo contenedor div con el ID #panel de detalles. El objetivo de este objeto en jQuery nos permite reemplazar los valores internos de los detalles de desplazamiento. Ahora echemos un vistazo a un elemento de elemento de la lista de la versión CSS3.
He cambiado el ID a una clase de .panel de detalles porque necesitamos múltiples divs adyacentes al lado de cada miniatura. CSS3 verifica cuando el usuario está flotando en el enlace y muestra el div hermano, que ya contiene toda la información. Por lo tanto, otro beneficio al usar CSS3 es que no necesitamos extraer información de los atributos cada vez que cambia la visualización de destino.
Quiero comenzar con el ejemplo de CSS3 porque mi código jQuery es un poco más complicado. Esta podría ser otra razón para seguir con la versión frontal de HTML / CSS, aunque este efecto se perderá en los navegadores antiguos.
Detalles de Hover con CSS3
La forma en que todo funciona es usando un signo más (+) en el selector. CSS apuntará al último elemento del selector, en este caso nuestro .panel de detalles que se encuentra directamente al lado de cada enlace de anclaje. He dado a los enlaces una clase de .hvrlink por lo que son más fáciles de identificar.
Espero que no haya nada demasiado complicado en este bloque de configuración inicial. Cada elemento de la lista se deja flotar hacia la izquierda con un amplio margen para colocar solo dos miniaturas por fila. Estos elementos de la lista contienen el enlace de la miniatura y la ventana de detalles. Damos la
Lo que podría encontrar interesante es el cambio de posición entre los dos primeros enlaces. Para cada otro enlace he añadido una clase de .lado derecho en el contenedor del panel de detalles. Originalmente empujamos el panel flotante sobre 290px hacia la izquierda porque esta es la longitud de la miniatura. Pero en la columna derecha tenemos este panel flotando fuera de la pantalla, así que en lugar de eso queremos que aparezca a la izquierda. Esto utiliza una posición izquierda negativa basada en el ancho completo de 530 px del panel de detalles.
Estos dos últimos selectores son todo lo que necesitamos para configurar correctamente el hover. Cuando el usuario se mueve sobre un enlace de miniatura, inmediatamente mostramos los .panel de detalles. El segundo bloque de código lo mantiene visualizado incluso cuando el usuario coloca la miniatura en los detalles, de modo que siempre se muestra hasta que los usuarios se mueven completamente fuera de ese elemento de la lista en particular.
Mudarse a jQuery
Vamos a abordar el código JS que se encuentra en la parte inferior de mi original index.html expediente. Gran parte del código CSS es similar, pero es aún más corto y fácil de leer porque no necesitamos valores absolutos. Esto se maneja en lugar de los cálculos de jQuery que pueden parecer complicados, pero todo tiene sentido una vez que lo piensas.
Estoy apuntando a la imagen en miniatura para el oyente del evento hover y, una vez que se activa, configuramos un montón de variables.El primer bloque grande de código obtiene toda la información importante que necesitamos para agregar al contenedor del panel flotante.
A continuación, necesitamos reunir coordenadas para comprender dónde debe aparecer este panel de detalles. La coordenada y no cambiará en función de la posición, pero la coordenada x si estamos flotando en la columna derecha. Tengo una declaración lógica que comprueba la posición actual de la imagen dividida por toda la ventana usando $ (ventana) .width (). Si la imagen supera el 50% del ancho total de la página, entonces necesitamos que se muestre en el lado izquierdo en lugar del derecho.
El siguiente conjunto de código está reemplazando los valores HTML internos dentro del panel de detalles utilizando las variables definidas anteriormente. Al final actualizamos las propiedades CSS en línea para cambiar. bloqueo de pantalla y hacer que aparezca en la página. Cuando desplace el mouse sobre la miniatura, volverá a ocultar la pantalla automáticamente, a menos que coloquemos el cursor en el panel de detalles. Este elemento se capturará utilizando un detector de eventos completamente separado que requiere un poco de lógica complicada.
Note que estoy usando dos métodos .on () adjuntos al mismo selector de jQuery. Podría considerar combinarlos en una cadena jQuery junto con otros oyentes de eventos similares. Al pasar el mouse solo necesitamos mantener el panel mostrado como un elemento de bloque. Pero al salir del panel de detalles, solo deseamos ocultarlo cuando el usuario no está colocando el mouse sobre la misma imagen en miniatura utilizada para mostrarla en primer lugar.
La variable mi se devuelve de cada evento de mouseout, que nos indica qué elemento nuevo se está desplazando. Aplicando la propiedad parentNode Podemos ver dónde está contenido este nuevo elemento. Tengo cuatro comprobaciones lógicas separadas dentro de esta declaración, y tres de ellas están comparando con los objetos dentro del panel de detalles. El nombre de la variable esta se refiere a #panel de detalles.
Necesitamos verificar en caso de que el usuario se desplace sobre el elemento h3, el párrafo o incluso la imagen (que está incrustada en un enlace de anclaje y un div). Si es así entonces no ocultamos nada.
También estoy comprobando con el nombre del nodo propiedad en caso de que el usuario pase del panel de detalles al cuerpo. Si el nodo devuelve IMG, no debería intentar ocultar nada de inmediato. Esto es más una solución pirateada porque las únicas imágenes en mi demostración se relacionan con las miniaturas en sí mismas. Por lo tanto, cuando se desplaza sobre la imagen, queremos mantener el panel en pantalla, de lo contrario, se oculta con el método .css () de jQuery.
No he podido resolverlo con una mejor solución, pero me encantaría escuchar los comentarios de otros desarrolladores. Es posible que se compare con la clase de imagen, pero desafortunadamente no puede hacer esto con una nombre del nodo propiedad. Encontrarás mi código comentado. console.log (e.nodeName) que puede ejecutar para comprobar qué están devolviendo estas propiedades al navegador.
Demo de jQuery - Demo de CSS3 - Descargar código fuente
Clausura
Estas técnicas son generalmente fáciles de entender si se siente cómodo en el desarrollo web frontend. CSS3 proporciona una solución fácil, pero solo funciona correctamente en navegadores compatibles con los estándares. Notará que ambas versiones son básicamente las mismas para la perspectiva del visitante. Pruebe esto en su próximo proyecto web y vea qué más puede construir sobre mi plantilla.