descubra

miércoles, 27 de octubre de 2010

Efecto en enlaces con jQuery


Los que utilizan jQuery en su blog pueden dar un aspecto diferente a los enlaces con Nudging.js el efecto es un sutil movimiento al pasar el puntero sobre el enlace.
Para añadirlo nos situamos en plantilla edición HTML y justo antes de </head> añadimos lo siguiente:

<script type='text/javascript'>
// <![CDATA[
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '45px' }, 400);
}, function() { //mouse out
$(this).animate({ paddingLeft: '1px' }, 400);
});
});
//]]>
</script>

Si no estamos utilizando jQuery y es la primera vez que vamos a utilizarlo entonces también añadiremos:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Guardamos los cambios y queda crear los enlaces, si los añadimos en un gadget escogeremos HTML/Javascript



Url-enlace añadimos la url del sitio que vamos a enlazar.
Texto-enlace es el texto que visualizamos y hará de enlace.
Url-imagen añadiremos la url dela imagen a mostrar.
Url-icono-bullets es el lugar para añadir la url del icono o bullet.

No hay comentarios:

Publicar un comentario