Código de JavaScript - Simular un GIF animado

Simular un GIF animado

JavaScript

(4)

Publicado el 1 de Octubre del 2002 por Carlos Roberto Guimaraenz

22.823 visualizaciones desde el 1 de Octubre del 2002

A partir de 4 imagenes, este código simula un Gif Animado.

Versión 1
(4)

Publicado el 1 de Octubre del 2002

gráfica de visualizaciones de la versión: Versión 1

22.824 visualizaciones desde el 1 de Octubre del 2002

Para este ejemplo, necesitaras 4 imagenes con el mismo tamaño con el nombre: imagen1.jpg, imagen2.jpg, imagen3.jpg y imagen4.jpg

<HTML>

<HEAD>

</HEAD>

<STYLE>

.imagen {margin-top: -100px}

</STYLE>

<BODY onload="inicial(), inicia_giro()" bgcolor=black>

<center><br><br><br><br><br><br>

<img class=imagen id=t1 src="imagen1.jpg"><br>

<img class=imagen id=t2 src="imagen2.jpg"><br>

<img class=imagen id=t3 src="imagen3.jpg"><br>

<img class=imagen id=t4 src="imagen4.jpg"><br>

</center>

<script>

function inicial() {

	window.t1.style.visibility="visible";

	window.t2.style.visibility="hidden";

	window.t3.style.visibility="hidden";

	window.t4.style.visibility="hidden";

function inicia_giro() {

	window.setInterval("fases()", 1000);

function fases() {

	if(window.t1.style.visibility=="visible") {

		window.t1.style.visibility="hidden";

		window.t2.style.visibility="visible";

		window.t3.style.visibility="hidden";

		window.t4.style.visibility="hidden";

	} else if(window.t2.style.visibility=="visible") {

		window.t1.style.visibility="hidden";

		window.t2.style.visibility="hidden";

		window.t3.style.visibility="visible";

		window.t4.style.visibility="hidden";

	} else if(window.t3.style.visibility=="visible") {

		window.t1.style.visibility="hidden";

		window.t2.style.visibility="hidden";

		window.t3.style.visibility="hidden";

		window.t4.style.visibility="visible";

	} else if(window.t4.style.visibility=="visible") {

		window.t1.style.visibility="visible";

		window.t2.style.visibility="hidden";

		window.t3.style.visibility="hidden";

		window.t4.style.visibility="hidden";

</script>

</BODY>

</HTML>

Comentarios sobre la versión: Versión 1 (4)

angel

21 de Diciembre del 2002

creo yo que apenas que estoy empezando con java ....
se me hace muy beuno este codigo asi ya puedo acompletar la pagina que estoy haceindo...
gracias Carlos

Responder

Alejandro

20 de Marzo del 2003

Lo de la animacion es buena pero las imagenes deberian cambiar una sobre la otra y no ir en escalera yo pienso que quedaria mejor como animacion gif

Responder

Mercado Azul

5 de Abril del 2014

Es buena, solucion para algunos casos.
Lo que se muestra en escalera, se puede subsanar utilizando un div para cada imagen y superponiéndolos con las mismas coordenadas en distintas capas.

Responder

Mercado Azul

5 de Abril del 2014

Y si en un caso muy especial y espacial que tengo, donde pensaba colocar varios gif uno al lado de otro como sobre un mapa google (tiles, teselas 256x256px) y el problema era sincronizarlos, pues cada gif tenía su propio tiempo de inicio y generaba un caos. Con esto y las capas div, toda la ventana del mapa google puedo superponer imagenes sincronizadas y si necesito transparencias, utilizo png en lugar de jpg.

Responder