Está en: Recursos web Javascript - Movimiento aleatorio

Movimiento aleatorio con Javascript:




En este script generamos un movimiento aleatorio de un objeto situado en el centro de una capa.

En el cuerpo del documento creamos una div que contendrá el objeto y otra div que contendrá a la otra div.

<div id="cuerpo" style="width:720px; height:400px; background-color: #CCFFEB; border:1px solid #CCCCCC;margin-bottom:10px;">
<div id="objeto" style="width:90px; height:115px; position:relative;"><img src="../imagenes/mano.gif"/>
</div>
</div>


Ahora entre las etiquetas <head></head> el script:

<script language="javascript" type="text/javascript">
<!--


Capturamos en variables el tamaño de la división objeto y la división cuerpo, y situamos el objeto en el centro de la div cuerpo:

var ancho_cuerpo;
var alto_cuerpo;
var ancho_objeto;
var alto_objeto;
function inicializar(){
ancho_cuerpo=parseInt(document.getElementById("cuerpo").style.width);
alto_cuerpo=parseInt(document.getElementById("cuerpo").style.height);
ancho_objeto=parseInt(document.getElementById("objeto").style.width);
alto_objeto=parseInt(document.getElementById("objeto").style.height);
document.getElementById("objeto").style.left=(ancho_cuerpo-ancho_objeto)/2+"px";
document.getElementById("objeto").style.top=(alto_cuerpo-alto_objeto)/2+"px";
activar_movimiento();

}

Ahora creamos la función que moverá el objeto aleatoriamente:

function mover(direccion){
var x=parseInt(document.getElementById("objeto").style.left);
var y=parseInt(document.getElementById("objeto").style.top);
switch(direccion){
case 0:
if(x<ancho_cuerpo-ancho_objeto)
x+=10;
break;
case 1:
if(x>0)
x-=10;
break;
case 2:
if(y<alto_cuerpo-alto_objeto)
y+=10;
break;
case 3:
if(y>0)
y-=10;
break;
}

document.getElementById("objeto").style.left=x+"px";
document.getElementById("objeto").style.top=y+"px";
}
function activar_movimiento(){
var x=parseInt(Math.random()*4);
if(x==4)
x=3;
mover(x);
setTimeout("activar_movimiento()",100);
}
//-->
</script>

Finalmente llamamos a la función en el evento onLoad del body:

<body onload="inicializar()">


Inicio / Servicios Web / Recursos Web / Portfolio / Enlaces / Contacto / Sitemap / Aviso Legal

Hu Creative Web Site - info@hucreative.com
www.hucreative.com