Efeito:
Ideia:
Use o cronômetro setInerval() para realizar exercícios. Então o ponto chave é dar-lhe um julgamento para preencher a lacuna quando finalmente parar.
Código:
Copie o código do código da seguinte forma:
<head runat="servidor">
<título></título>
<style type="texto/css">
#div1
{
largura: 100px;
altura: 100px;
plano de fundo: #0000FF;
posição: absoluta;
esquerda: 800px;
superior: 100px;
}
#div200
{
largura: 1px;
altura: 400px;
plano de fundo: #FF0000;
posição: absoluta;
esquerda: 200px;
}
#div500
{
largura: 1px;
altura: 400px;
plano de fundo: #FF0000;
posição: absoluta;
esquerda: 500px;
}
</estilo>
<script type="texto/javascript">
função mover(fim) {
var oDiv = document.getElementById('div1');
var temporizador = null;
temporizador = setInterval(função(){
var speed = (end - oDiv.offsetLeft) / 5; //Obtém a velocidade do movimento com base no ponto final e offsetLeft;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //Carrega o arredondamento, a casa decimal torna-se um número inteiro,
// if (oDiv.offsetLeft <= fim) {
// clearInterval(temporizador);
// }
// outro {
// oDiv.style.left = oDiv.offsetLeft + velocidade + 'px';
// }
if (Math.abs(end - oDiv.offsetLeft) <= speed) { //Porque haverá uma pequena lacuna no final ao parar, ou não atingirá completamente o local designado, então deve ser menor que sua velocidade
clearInterval(timer); //Quando a distância for menor que a velocidade, para o cronômetro
oDiv.style.left = end + 'px'; //Preencha a lacuna após parar.
}
outro {
oDiv.style.left = oDiv.offsetLeft + velocidade + 'px'; //Mover DIV
}
}, 30)
}
</script>
</head>
<corpo>
<input type="button" id="btn1" value="Para a posição de 500" onclick="move(500);"
<input type="button" id="btn2" value="Para a posição de 200" onclick="move(200);"
<divid="div1">
</div>
<div id="div200">200
</div>
<div id="div500">500
</div>
</body>