Código JavaScript : Imagen con movimiento de rebote entre el ancho de la pantalla
Ejemplo
<html><head>
<meta charset= utf-8 />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css">
.post-body{height:100%;width:100%; background-color:black;}
.planeta{height:20px;width:20px;}
img:hover {
-moz-transform: scaleX(-1); /* Firefox */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* Chrome y Safari */
transform: scaleX(-1); /* w3org */
filter: FlipH; /* Internet Explorer */
}
</style>
<SCRIPT>
var x=0;
var y=0;
function moverder(){
x+=5;
y=50*Math.cos((x/90))+10;
document.images.chuk.style.left=x+"px";
document.images.chuk.style.top=y+"px";
//Hasta donde llega la imagen en la parte derecha
if(x<innerWidth- document.images.chuk.width)
//repeticiones por segundo
setTimeout("moverder();",10);
//Llamamos a la función desplazamiento hacia la izquierda
else
//repeticiones por segundo
setTimeout("moveriz();",10);
}
function moveriz(){
x-=5;
y=50*Math.cos((x/90))+10;
document.images.chuk.style.left=x+"px";
document.images.chuk.style.top=y+"px";
//Hasta donde llega la imagen en la parte izquierda
if(x>=0)
//repeticiones por segundo
setTimeout("moveriz();",10);
//repeticiones por segundo
else
//Llamamos a la funcion desplazamiento hacia la derecha
setTimeout("moverder();",10);
}
</SCRIPT>
</head>
<BODY onLoad="moverder();">
<IMG class="planeta" name="chuk"border="0"src=""
style="position:absolute; ">
</body>
</html>
Comentarios