Carátula sexy del álbum con MooTools o jQuery - » HostIN
La forma en que se muestra la información del álbum suele ser…
- HostIN
- Programación
- Carátula sexy del álbum con MooTools o jQuery -
Carátula sexy del álbum con MooTools o jQuery -
La forma en que se muestra la información del álbum suele ser tremendamente aburrida. Se supone que la música es divertida y conmovedora, ¿verdad? Afortunadamente, MooTools y jQuery nos permiten comunicar esa creatividad en la web.
de MooTools de jQuery
Índice de contenidos
El XHTML
divdiv/divdiv/divdivh3Cada imagen cuenta una historia/h3pCada imagen cuenta una historia es el tercer álbum de Rod Stewart, lanzado a mediados de 1971. Se convirtió en el álbum más aclamado por la crítica de Stewart y se convirtió en el estándar por el cual se juzgaron todos sus álbumes posteriores.br /a href="https://soloprogramadores.top/caratula-sexy-del-album-con-mootools-o-jquery/javascript:;" style="font-weight:bold;"¡Compre ahora!/a | a href="https://soloprogramadores.top/caratula-sexy-del-album-con-mootools-o-jquery/javascript:;"Más álbumes de Rod Stewart/abr /img src="everypicture-stars.gif" alt="¡5 estrellas!" estilo="margin-top:10px;" //p/div/div
Algunos DIV estructurados y la información del álbum.
El CSS
#álbum{ ancho:500px; posición: relativa; }#album-front{ ancho:400px; altura: 393 px; fondo:url(everypicture-front.png) 0 0 sin repetición; cursor:puntero; posición:absoluta; arriba: 0; izquierda: 0; índice z: 1; }#album-back{ display:none; ancho: 250 px; altura: 194 px; posición:absoluta; arriba: 250px; izquierda: 250px; fondo:url(everypicture-back.png) 0 0 sin repetición; índice z: 3; }#álbum-desc{ pantalla: ninguna; tamaño de fuente: 10px; familia de fuentes: tahoma; borde: 1px sólido #7B7057; relleno: 10px; ancho: 230 px; posición:absoluta; arriba: 20px; izquierda: 250px; índice z: 3; -webkit-border-radius:8px; -moz-border-radius:8px; radio de frontera: 8px; fondo:#fff; }
El CSS se utiliza principalmente para el posicionamiento y las imágenes. Elegí incorporar las imágenes del álbum como imágenes de fondo; Puedes usar etiquetas IMG si lo deseas.
El JavaScript de MooTools
(function($) {window.addEvent('domready',function() { //settingsvar fades = $$('#album-back,#album-desc');//initfades.setStyles({opacity: 0, display: 'block'});//hover version$('album').addEvents({mouseenter: function() {fades.fade('in');},mouseleave: function() {fades.fade(' fuera');}});});})(document.id);
Sencilla aparición y desaparición, nada más.
El JavaScript jQuery
$(document).ready(function() {//settingsvar fades = $('#album-back,#album-desc');//versión flotante$('#album').hover(function() {fades .fadeIn(250);}, función() {fades.fadeOut(250);});});
de MooTools de jQuery
Creo que esta es una excelente manera de agregar algo de dinamismo a una exhibición que de otro modo sería aburrida. ¡Rod Stewart FTW!
Te podría interesar...
Alojamiento compartido estable en EE. UU., Soporte 24/7 Cómo crear una tarjeta de Twitter - Guía de formatos de publicación de WordPress – ThisHosting.Rocks La importancia de revisar complementos y temas WP Engine reconocido como el No. 8 en la lista de las 25 empresas de computación en la nube privada mejor calificadas Definición de hosting web compartido Ahorre dinero con estas increíbles ofertas del Black Friday - Enlaces de Python para Qt Toolkit ¿Qué es el alojamiento Quickbooks y sus beneficios para las empresas?
Deja una respuesta Cancelar la respuesta
Lo siento, debes estar conectado para publicar un comentario.