Similarmente a capturando teclas, nosotros podemos utilizar al ratón para comenzar una animación. Lo que lo siguiente hará es de crear un hyperlink, así cuando es presionado, deslizara el bloc. Cuando sueltas el enlace parará.
Este script no debe ser nada nuevo. Necesitaremos un variable activo otra vez allí, y la función mover es una copia al carbón a las funciones anteriores:
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
block.active = false
}
function slide() {
if (block.active) {
block.xpos += 5
block.left = block.xpos
setTimeout("slide()",30)
}
}
El truco que tengo que hacer es con el hyperlink:
<A HREF= "javascript:void(null)"onMouseDown="block.active= true; slide(); return false;"onMouseUp="block.active= false"onMouseOut="block.active=false">move</A>
El onMouseDown fijará un variable activo a verdadero true, y luego llama a la función slide() la cual comienza nuestra animación. Cuando el enlace es sostenido, nada cambia. Este continua a deslizarse "slide" cuando sueltas al hyperlink - y de esa forma ejecuta lo que esté en el controlador del onMouseUp. Fijará un variable activo a falso false el cual parará al deslizamiento.
En onMouseOut también fijará un variable activo a falso. He encontrado que si mueves el ratón afuera del link y luego lo sueltas, este no parara a la animación - porque no estas ejecutando un MouseUp encima del enlace. Pero si incluyes el onMouseOut areglará este problema.
Presiona aquí para ver este ejemplo.
| Casa | Próxima Lección: Eventos del Teclado |