Jugando con jQuery: macEmulator

03 oct. 2008
Tras la breve introducción a jQuery, propongo un ejemplo que he llamado "macEmulator". La verdad es que soy bastante malo dando nombre a las cosas, y en el mundo de la programación tenemos que estar todo el santo día dando nombres a variables, a funciones, a clases, a ficheros...

El "macEmulator" lo que hace es coger las imágenes ubicadas dentro del "div" que le indiquemos y darles un efecto similar al de los iconos de los Mac. Cuando el ratón está encima de un icono la imagen se hace grande (progresivamente) y cuando sales se hace pequeña (también de forma progresiva).

Lo he puesto dentro de un plugin, de forma que activar la funcionalidad se reduce a una sola línea de código:

$("#divId").macEmulation(100,150,100,500);

Donde:
  • divId es el "id" del div en el que están ubicadas las imágenes.
  • El primer parámetro marca la anchura inicial de las imágenes
  • El segundo parámetro marca la anchura de la imagen cuando el ratón está sobre ella.
  • El tercer parámetro marca la anchura de la imagen cuando el ratón deja de estar sobre ella.
  • El cuarto parámetro marca el tiempo que tarda la imagen en transformarse progresivamente de grande a pequeña y de pequeña a grande.

A continuación muestro el código con comentarios para entender el script:

jQuery.fn.macEmulation = function(initialWitdh, hoverWidth, houtWidth, delay) {
    // Cogemos el elemento dentro del cual estarán las imágenes
    var div = $(this);

    // Cuando la página esté cargada, aplicaremos la anchura inicial marcada
    // y pondremos cada imagen dentro de un div con unos estilos predefinidos
    $(document).ready(function() {
        div.find('img').width(initialWitdh);
        div.find('img').wrap('<div style="float:left; padding-right:5px;"></div>');

    });

    // Asignamos la anchura de la imagen cuando estamos sobre ella y cuando dejamos de estarlo.
    // Para ello utilizaremos el modo "animate" que hará que la transición sea progresiva.
    div.find('img').hover(
    function() {
        $(this).animate({ width: hoverWidth + "px" }, delay);
    },
    function() {
        $(this).animate({ width: houtWidth + "px" }, delay);
    });
}
comments powered by Disqus
subir