Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/04/2009, 06:09
miguelelinventor
 
Fecha de Ingreso: junio-2008
Mensajes: 14
Antigüedad: 15 años, 11 meses
Puntos: 0
Dar movimiento a un objeto

Bueno pues aquí os dejo un codigo que acabo de crear, son funciones minimas para dar movimiento a los objetos, en mi ejemplo hago que de mueva una capa, espero que sea de utilidad ya que yevo tiempo queriendo hacerlo y lo mas simple es lo que mejor funciona.

Codigo:

<html>
<head>
<script>
inicio=1;
fin=300;
objeto="";
function mover(){
if(inicio<fin){
document.getElementById(objeto).style.left=inicio;
inicio++;
setTimeout("mover()", 5);
}

}
</script>
</head>
<body>

<div onClick="objeto='capa';mover();" id="capa" style="position:relative;border:1px solid #000000;width:100px;height:100px;background-color:Yellow;">Capa que se va ha mover</div>



</body>
</html>


El funcionamiento es muy simple, existen las variables glovales inicio y fin, los datos pueden ser cargado predeterminadamente o con algun evento ejemplo :

<div onClick="inicio=1";fin=500;>Poner valores a inicio y fin</div>

Despues creamos el objeto que queremos mover con su id correspondiente.

<table id="tablamovible"><tr><td>tabla que se va a mover</td></tr></table>

Y despues llamamos a la funcion mover poniendo como objeto lo que vallamos a mover ejemplo.

<input type="button" value="Mover" onClick="objeto='tablamovible',mover();">

Y la tabla se deve mover.

La funcion javascript es simple, si inicio es menor que fin, la tabla se posiciona en inicio ya sea altura(top) o anchura(left), se incrementa en +1 inicio y se vuelve a llamar a ella misma pasado x tiempo, la tabla se movera hasta que inicio sea igual o mayor que fin.

Saludos a todos espero que alguien optimice el codigo aportado.