Botones estilo Skype usando MooTools - » HostIN
Hace unas semanas, el experto en jQuery, Janko Jovanovic, lanzó un interesante…
- HostIN
- Programación
- Botones estilo Skype usando MooTools -
Botones estilo Skype usando MooTools -
Hace unas semanas, el experto en jQuery, Janko Jovanovic, lanzó un interesante tutorial que muestra cómo crear un botón similar a Skype usando jQuery. Me impresionó el artículo de Janko, así que decidí trasladar el efecto a MooTools.
Índice de contenidos
El XHTML
a href="#"img src="skype-button.png" alt="Botón" /¡Contáctenos!/a
Este es el código exacto proporcionado por Janko.
El CSS
.botón de skype { relleno:4px 10px 3px 25px; borde: sólido 1px #8AB134; posición: relativa; cursor:puntero; pantalla: bloquear en línea; imagen de fondo:url('skype-bkg.png'); repetición de fondo: repetición-x; tamaño de fuente: 11px; altura: 16px; decoración de texto: ninguna; color:#40740D; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px;}.skype-button img { posición:absoluta; arriba: -4px; izquierda: -12px; borde: ninguno;}.skype-button:hover { color:#8AB134;}
Este también es el código exacto proporcionado por Janko.
El JavaScript de MooTools
window.addEvent('domready',function() {$$('a.skype-button').each(function(el) {var img = el.getElement('img'), corriendo = false;var fx2 = new Fx.Morph(img, {duración: 100, enlace: 'cadena', onChainComplete:function() { running = false; } });var fx1 = new Fx.Morph(img, {duración: 200, enlace: ' cadena', onComplete:function() {fx2.start({'top':'-7px'}).start({'top':'-4px'}).start({'top':'-6px' }).start({'top':'-4px'});}});el.addEvent('mouseenter',function() {if(!running) {fx1.start({'top':'- 10px'}).start({'top':'-4px'});running = true;}});});});
Usamos instancias de efectos duales para crear el rebote. Fx.Transitions actualmente no permite este efecto de rebote y la funcionalidad de cadena de MooTools no mostró el efecto tan bien.
¡Felicitaciones a Janko por su artículo original!
Te podría interesar...
Código de cupón exclusivo para Cloudways Host Havoc Review - Averigua si deberías usarlos Allowoverride All cPanel: Cómo configurar Cómo instalar el complemento del corrector ortográfico en su blog de WordPress 5 maneras en que un desarrollador web puede mejorar su seguridad - Web Hosting | Computación en la nube | Centro de datos Integración de API en WordPress - ThisHosting.Rocks Las 10 mejores herramientas gratuitas de marketing de contenidos para 2024 CentralNic anuncia una nueva adquisición Qué tipo de fundadores deberían construir con equipos de desarrollo offshore
Deja una respuesta Cancelar la respuesta
Lo siento, debes estar conectado para publicar un comentario.