効果：
アイデア：
エクササイズを実行するには、setInerval() タイマーを使用します。そして、最終的に止まったときにギャップを埋める判断を与えることがポイントです。
コード：
次のようにコードをコピーします。
<head runat="サーバー">
<タイトル></タイトル>
<style type="text/css">
#div1
{
幅: 100ピクセル;
高さ: 100ピクセル;
背景: #0000FF;
位置: 絶対;
左: 800ピクセル;
上: 100ピクセル;
}
#div200
{
幅: 1px;
高さ: 400ピクセル;
背景: #FF0000;
位置: 絶対;
左: 200ピクセル;
}
#div500
{
幅: 1px;
高さ: 400ピクセル;
背景: #FF0000;
位置: 絶対;
左: 500ピクセル;
}
</スタイル>
<script type="text/javascript">
関数 move(end) {
var oDiv = document.getElementById('div1');
var タイマー = null;
タイマー = setInterval(function () {
varspeed = (end - oDiv.offsetLeft) //終点とoffsetLeftに基づいて移動速度を取得します。
Speed = Speed > 0 ? Math.ceil(speed) : Math.floor(speed); //四捨五入して小数点以下は整数になります。
// if (oDiv.offsetLeft <= end) {
//clearInterval(タイマー);
// }
// それ以外 {
// oDiv.style.left = oDiv.offsetLeft + 速度 + 'px';
// }
if (Math.abs(end - oDiv.offsetLeft) <= 速度) { //停止時に最後に少し隙間ができたり、指定した場所に完全に到達しないため、その速度以下になるはずです
clearInterval(timer); //距離が速度未満の場合、タイマーを停止します
oDiv.style.left = end + 'px'; //停止後に隙間を埋める。
}
それ以外 {
oDiv.style.left = oDiv.offsetLeft +speed + 'px'; //DIV を移動
}
}、30)
}
</script>
</head>
<本文>
<input type="button" id="btn1" value="500 の位置へ" onclick="move(500);" />
<input type="button" id="btn2" value="200 の位置へ" onclick="move(200);" />
<div id="div1">
</div>
<div id="div200">200
</div>
<div id="div500">500
</div>
</body>