![Antiguo](http://static.forosdelweb.com/fdwtheme/images/statusicon/post_old.gif)
21/04/2009, 06:09
|
| | Fecha de Ingreso: junio-2008
Mensajes: 14
Antigüedad: 16 años, 8 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. |