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