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

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!