Usted puede utilizar JavaScript para crear una animación compleja que tiene, pero no limitado a, los siguientes elementos -
- Fuegos artificiales
- Efecto de fundido
- Acondicionada para discapacitados o Despliegue
- Página de entrada o de salida Página
- Movimientos de objetos
Usted puede estar interesado en la biblioteca de animación basado JavaScript existente:Script.Aculo.us.
Este tutorial proporciona una comprensión básica de cómo usar JavaScript para crear una animación.
JavaScript se puede utilizar para mover un número de elementos DOM (<img />, <div> o cualquier otro elemento HTML) alrededor de la página de acuerdo con algún tipo de patrón determinado por una ecuación o función lógica.
JavaScript proporciona los siguientes dos funciones que se utilizan con frecuencia en programas de animación.
- setTimeout (función, duración) - Esta función llama a la función después de laduración de milisegundos a partir de ahora.
- setInterval (función, duración) - Esta función llama a la función después de cada duración milisegundos.
- clearTimeout (setTimeout_variable) - Esta función llama borra cualquier temporizador fijado por el (funciones) setTimeout.
JavaScript también puede establecer una serie de atributos de un objeto DOM incluyendo su posición en la pantalla. Puede ajustar la parte superior de atributos e izquierda de un objeto para colocarlo en cualquier lugar de la pantalla. Aquí está su sintaxis.
// Set distance from left edge of the screen.
object.style.left = distance in pixels or points;
or
// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;
Animación Manual
Así que vamos a poner en práctica un simple animación utilizando propiedades de los objetos DOM y funciones de JavaScript como sigue. La siguiente lista contiene diferentes métodos DOM.
- Estamos utilizando la función JavaScript getElementById () para obtener un objeto DOM y luego asignarlo a una variable global imgObj.
- Hemos definido una función de inicialización init () para inicializar imgObjdonde hemos fijado su posición y que dejan atributos.
- Estamos llamando a la función de inicialización en el momento de la carga de la ventana.
- Por último, hacemos un llamado MoveRight () la función de aumentar la distancia izquierda por 10 píxeles. También puede establecer en un valor negativo para moverlo hacia el lado izquierdo.
Ejemplo
Pruebe el siguiente ejemplo.
<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
<!--
var imgObj = null;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>
Salida
Automatizado de Animación
En el ejemplo anterior, vimos cómo una imagen se mueve a la derecha con cada clic.Podemos automatizar este proceso mediante el uso de la función JavaScript setTimeout () de la siguiente manera -
Aquí hemos añadido más métodos. Así que vamos a ver lo que es nuevo aquí -
- El MoveRight () función está llamando setTimeout () función para establecer la posición de imgObj.
- Hemos añadido una nueva función stop () para borrar el contador de tiempo establecido por setTimeout () función y para establecer el objeto a su posición inicial.
Ejemplo
Pruebe el siguiente código de ejemplo.
<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
<!--
var imgObj = null;
var animate ;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,20); // call moveRight in 20msec
}
function stop(){
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Start" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
</html>
Rollover con un evento de ratón
He aquí un ejemplo simple que muestra vuelco imagen con un evento de ratón.
Vamos a ver lo que estamos utilizando en el siguiente ejemplo -
- En el momento de la carga de esta página, los "si" comprobaciones de los estados de la existencia del objeto de imagen. Si el objeto de imagen no está disponible, no se ejecutará este bloque.
- La imagen () constructor crea y carga previamente un nuevo objeto imagen llamada imagen1.
- La propiedad src se le asigna el nombre del archivo de imagen externo llamado /images/html.gif.
- Del mismo modo, hemos creado image2 objeto y asignado /images/http.gif en este objeto.
- La # (almohadilla) desactiva el enlace para que el navegador no tratar de ir a una URL cuando se hace clic. Este enlace es una imagen.
- El onMouseOver manejador de evento se activa cuando se mueve del usuario en el enlace, y el onMouseOut controlador de eventos se activa cuando el ratón del usuario se aleja del enlace (imagen).
- Cuando el ratón se mueve sobre la imagen, la imagen cambia HTTP desde la primera imagen a la segunda. Cuando el ratón se mueve fuera de la imagen, se muestra la imagen original.
- Cuando el ratón se mueve lejos del enlace, el html.gif imagen inicial volverá a aparecer en la pantalla.
<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type="text/javascript">
<!--
if(document.images){
var image1 = new Image(); // Preload an image
image1.src = "/images/html.gif";
var image2 = new Image(); // Preload second image
image2.src = "/images/http.gif";
}
//-->
</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href="#" onMouseOver="document.myImage.src=image2.src;" onMouseOut="document.myImage.src=image1.src;">
<img name="myImage" src="/images/html.gif" />
</a>
</body>
</html>
No hay comentarios:
Publicar un comentario