効果: もの: setInerval() タイマーを使用してエクササイズを実行します。そして、最終的に止まったときにギャップを埋める判断を与えることがポイントです。 コード: コードをコピー コードは次のとおりです: <br> #div1<br> {<br> 幅: 100px;<br> 高さ: 100px;<br> 背景: #0000FF;<br> 位置: 絶対;<br>左: 800px;<br> 上: 100px;<br> }<br> #div200<br> {<br> 幅: 1px;<br> 高さ: 400px;<br> 背景: #FF0000;<br>位置: 絶対;<br> 左: 200px;<br> }<br> #div500<br> {<br> 幅: 1px;<br> 高さ: 400px;<br> 背景: #FF0000;<br> 位置: 絶対; <br> 左: 500px;<br> }<br> <br> function move(end) {<br> var oDiv = document.getElementById('div1');<br> var timer = null;<br> timer = setInterval(function () {<br> varspeed = (end - oDiv.offsetLeft) / 5; //终点とオフセット左に基づく移動速度<br> 速度 = 速度 > 0 ? Math.ceil(速度) : Math.floor(速度); //进位取整，小数位变整位，<br> // if (oDiv.offsetLeft <= end) {<BR> // clearInterval(timer) ;<BR> // }<BR> // else {<BR> // oDiv.style.left = oDiv.offsetLeft 速度 'px';<BR> // }<BR> if (math.abs (end -odiv.offsetLeft) & lt; = Speed) {// 停止時に最後に少し隙間ができたり、指定された場所に完全に到達しないため、速度よりも速度よりも少ない<BR> <BR> }<BR> }, 30)<BR> }<BR> < /script><br></head><br><body><br> <input type="button" id ="btn1" value="500の位置へ" onclick="move(500); " /><br> <input type="button" id="btn2" value="200の位置へ" onclick="move(200);" /><br> <div id="div1 "><br> </div><br> <div id="div200">200<br> </div><br> <div id="div500">500<br> </div><br></body><br><br><br> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
