Bienvenido(a), Visitante. Por favor, ingresa o regístrate.
Para poder ver los Manuales y las Descargas de Android.
Hemos acortado el registro para su comodidad.
google foro



Mayo 19, 2012, 04:18:57 *
Bienvenido(a), Visitante. Por favor, ingresa o regístrate.

Ingresar con nombre de usuario, contraseña y duración de la sesión
Noticias: Buscamos moderadores y expertos en Google
 
   Inicio   Ayuda Buscar Ingresar Registrarse  
Páginas: [1]
  Imprimir  
Autor Tema: Efecto shake en tu blog  (Leído 869 veces)
google foro
Todo sobre Google en googleforo.com
Administrator
Hero Member
*****
Mensajes: 1685


Ver Perfil WWW Email
« : Marzo 19, 2010, 11:11:01 »


Uno de los efectos que podemos aprovechar de Prototype y Scriptaculous es el efecto shake, o sea de sacudido.
El efecto de sacudido es un efecto que al hacer click sobre un enlace o elemento éste se sacude de un lado a otro.

Para poner este efecto en tus enlaces sigue estos sencillos pasos:
Antes de </head> lo siguiente:
NOTA: Si ya tuvieras Prototipe y Scriptaculous en tu plantilla entonces sólo agrega lo que está en color verde.

    <!-- Prototype y Scriptaculous-->
    <script src='http://www.google.com/jsapi'/>
    <script>
    google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
    google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
    </script>
    <!-- Prototype y Scriptaculous-->
    <script type='text/javascript'>

    function ShakeEffect(element){
    new Effect.Shake(element);
    }

    </script>



Por último en tus enlaces usa este código para que se aplique el efecto, por ejemplo en un enlace con una imagen el código sería este:

    <a href="URL del enlace" onclick="ShakeEffect(this);">
    <img src="URL de la imagen" />
    </a>



En un enlace de texto el código sería este:

    <a href="URL del enlace" onclick="ShakeEffect(this);">
    Texto del enlace
    </a>



Cambia la URL del enlace y la URL de la imagen donde se indica en color azul.
Si quisieras que este efecto se aplique no al hacer click sino cuando el cursor pasa por encima del enlace, entonces cambia lo que está en color rojo por esto:

    onmouseover


Como ves es muy sencillo y es otra forma de aprovechar las librerías que casi todos usamos.

Es posible que en Google Chrome el efecto no funcione correctamente cuando se trata de más de un enlace, en Mozilla Firefox e Internet Explorer funciona sin problemas.
En línea



Páginas: [1]
  Imprimir  
 
Ir a:  

Impulsado por MySQL Impulsado por PHP Powered by SMF 1.1.11 | SMF © 2006-2009, Simple Machines LLC XHTML 1.0 válido! CSS válido!