Gerakan yang dipercepat berarti bahwa suatu objek bergerak lebih cepat dan lebih cepat; Gerakan yang melambat berarti suatu objek bergerak lebih lambat dan lebih lambat. Sekarang gunakan JavaScript untuk mensimulasikan kedua efek ini. Prinsipnya adalah menggunakan setInterval atau setTimeout untuk secara dinamis mengubah jarak antara satu elemen dan elemen lain, seperti xxx.style.Left atau xxx.style.marginleft, dan kemudian meningkatkan kecepatan setelah setiap latihan, sehingga efek mempercepat gerakan muncul. Hal yang sama berlaku untuk melambat gerakan.
Berikut adalah dua contoh:
Mempercepat gerakan
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<iteme> JavaScript Motion Accelerated </itement>
<type style = "text/css">
* {margin: 0; padding: 0;}
.div1 {lebar: 100px; Tinggi: 100px; Latar Belakang: #F60 URL (qiuweiguan.gif) No-Repeat Center Center;}
</tyle>
<type skrip = "Teks/JavaScript">
var $$ = function (id) {
return document.getElementById (id);
}
window.onload = function () {
var obtn = $$ ("btn1");
var odiv = $$ ("Div1");
var timer = null;
var speed = 0;
obtn.onClick = function () {
clearInterval (timer);
timer = setInterval (function () {
kecepatan ++;
odiv.style.marginleft = odiv.offsetleft + kecepatan + "px";
}, 30);
}
}
</script>
</head>
<body id = "body">
<tombol id = "btn1"> go </button>
<Div ID = "Div1"> </div>
</body>
</html>
Catatan: Dalam contoh ini, setelah mengklik GO, blok Div akan terus berakselerasi ke kanan.
Kurangi olahraga
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<Title> Gerakan Pengurangan JavaScript </iteme>
<type style = "text/css">
* {margin: 0; padding: 0;}
.div1 {lebar: 100px; Tinggi: 100px; Latar Belakang: #F60 URL (qiuweiguan.gif) No-Repeat Center Center;}
</tyle>
<type skrip = "Teks/JavaScript">
var $$ = function (id) {
return document.getElementById (id);
}
window.onload = function () {
var obtn = $$ ("btn1");
var odiv = $$ ("Div1");
var timer = null;
var speed = 30;
obtn.onClick = function () {
clearInterval (timer);
timer = setInterval (function () {
kecepatan - ;
odiv.style.marginleft = odiv.offsetleft + kecepatan + "px";
}, 30);
}
}
</script>
</head>
<body id = "body">
<tombol id = "btn1"> go </button>
<Div ID = "Div1"> </div>
</body>
</html>
Catatan: Dalam contoh ini, setelah mengklik GO, blok Div akan terus melambat ke kanan sampai kecepatan berkurang ke nol, kecepatan menjadi negatif, dan kemudian berakselerasi ke kiri.