Para controlar la velocidad se deben modificar el valor en que aumenta la variable 'inicio' y el segundo parámetro de la función 'setTimeout()'. Primero la variable 'inicio' determina que tanto avanzara el <div> cada vez que la función 'mover()' sea llamada en este caso se esta avanzando solo 1 pixel.
inicio++;
Se puede aumentar esto, con lo cual el <div> se moveria más rápido, por ejemplo:
inicio+= 5;
El segundo parámetro de la función 'setTimeout()' determina el lapso de tiempo que espera javascript para cumplir la instrucción que se pasa como primer parámetro a esta función, el lapso de tiempo se expresa en milisegundos; en este caso la instrucción es llamar a la función mover con un retardo de 5 milisegundos, si se aumenta el valor de este parámetro el retardo sera mayor, con lo cual el movimiento sera más lento. Por ejemplo:
setTimeout("mover()", 10);
Para retrazar el inicio del movimiento se puede utilizar tambien 'setTimeout()', primero seria necesario definir una función que asignara el valor a la variable 'objeto' y que llamara por primera vez a la función 'mover()'. Esto seria algo asi:
Código Javascript
:
Ver original<script>
inicio=1;
fin=300;
objeto="";
function iniciar() {
objeto='capa';
mover();
}
function mover(){
if(inicio<fin){
document.getElementById(objeto).style.left=inicio;
inicio++;
setTimeout("mover()", 5);
}
}
</script>
</head>
<body onLoad="setTimeout('iniciar()', 1000)">
<div id="capa" style="position:relative;border:1px solid #000000;width:100px;height:100px;background-color:Yellow;">Capa que se va ha mover</div>
En este caso el retrazo es de 1segundo.