Memengaruhi:
Ide:
Gunakan pengatur waktu setInerval() untuk melakukan latihan. Maka poin kuncinya adalah memberikan penilaian untuk mengisi kesenjangan tersebut ketika akhirnya berhenti.
Kode:
Copy kode kodenya sebagai berikut:
<head runat="server">
<judul></judul>
<gaya tipe="teks/css">
#div1
{
lebar: 100 piksel;
tinggi: 100 piksel;
latar belakang: #0000FF;
posisi: mutlak;
kiri: 800 piksel;
atas: 100 piksel;
}
#div200
{
lebar: 1 piksel;
tinggi: 400 piksel;
latar belakang: #FF0000;
posisi: mutlak;
kiri: 200 piksel;
}
#div500
{
lebar: 1 piksel;
tinggi: 400 piksel;
latar belakang: #FF0000;
posisi: mutlak;
kiri: 500 piksel;
}
</gaya>
<skrip tipe="teks/javascript">
fungsi pindah(akhir) {
var oDiv = dokumen.getElementById('div1');
var pengatur waktu = nol;
pengatur waktu = setInterval(fungsi () {
var speed = (end - oDiv.offsetLeft) / 5; //Dapatkan kecepatan pergerakan berdasarkan titik akhir dan offsetLeft
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //Lakukan pembulatan, tempat desimal menjadi bilangan bulat,
// if (oDiv.offsetLeft <= akhir) {
// interval jelas(pengatur waktu);
// }
// kalau tidak {
// oDiv.style.left = oDiv.offsetLeft + kecepatan + 'px';
// }
if (Math.abs(end - oDiv.offsetLeft) <= speed) { //Karena akan ada celah kecil di ujung saat berhenti, atau tidak sepenuhnya mencapai tempat yang ditentukan, jadi kecepatannya harus lebih kecil darinya
clearInterval(timer); //Ketika jarak kurang dari kecepatan, hentikan timer
oDiv.style.left = end + 'px'; //Isi celah setelah berhenti.
}
kalau tidak {
oDiv.style.left = oDiv.offsetLeft + kecepatan + 'px'; //Pindahkan DIV
}
}, 30)
}
</skrip>
</kepala>
<tubuh>
<input type="button" id="btn1" value="Ke posisi 500" onclick="move(500);"
<input type="button" id="btn2" value="Ke posisi 200" onclick="move(200);"
<divid='div1'>
</div>
<div id="div200">200
</div>
<div id="div500">500
</div>
</tubuh>