Efecto:
Idea:
Utilice el temporizador setInerval() para realizar el ejercicio. Entonces el punto clave es darle un juicio para llenar el vacío cuando finalmente se detenga.
Código:
Copie el código de código de la siguiente manera:
<head runat="servidor">
<título></título>
<tipo de estilo="texto/css">
#div1
{
ancho: 100px;
altura: 100 píxeles;
fondo: #0000FF;
posición: absoluta;
izquierda: 800px;
arriba: 100px;
}
#div200
{
ancho: 1px;
altura: 400 px;
fondo: #FF0000;
posición: absoluta;
izquierda: 200px;
}
#div500
{
ancho: 1px;
altura: 400 px;
fondo: #FF0000;
posición: absoluta;
izquierda: 500px;
}
</estilo>
<tipo de script="texto/javascript">
movimiento de función (fin) {
var oDiv = document.getElementById('div1');
temporizador var = nulo;
temporizador = setInterval(función () {
var speed = (end - oDiv.offsetLeft) / 5; //Obtiene la velocidad de movimiento según el punto final y offsetLeft
velocidad = velocidad > 0? Math.ceil(velocidad): Math.floor(velocidad); // Llevar a cabo el redondeo, el decimal se convierte en un número entero,
// si (oDiv.offsetLeft <= fin) {
// clearInterval(temporizador);
// }
// demás {
// oDiv.style.left = oDiv.offsetLeft + velocidad + 'px';
// }
if (Math.abs(end - oDiv.offsetLeft) <= speed) { //Porque habrá un pequeño espacio al final al detenerse, o no llega completamente al lugar designado, por lo que debería ser menor que su velocidad
clearInterval(timer); //Cuando la distancia es menor que la velocidad, detiene el cronómetro
oDiv.style.left = end + 'px'; //Rellena el espacio después de detenerte.
}
demás {
oDiv.style.left = oDiv.offsetLeft + velocidad + 'px' //Mover DIV;
}
}, 30)
}
</script>
</cabeza>
<cuerpo>
<input type="button" id="btn1" value="A la posición de 500" onclick="move(500);"
<input type="button" id="btn2" value="A la posición de 200" onclick="move(200);"
<div id="div1">
</div>
<div id="div200">200
</div>
<div id="div500">500
</div>
</cuerpo>