การเคลื่อนไหวเร่งความเร็วหมายความว่าวัตถุเคลื่อนที่เร็วขึ้นและเร็วขึ้น การเคลื่อนไหวที่ชะลอตัวลงหมายความว่าวัตถุกำลังเคลื่อนที่ช้าลงและช้าลง ตอนนี้ใช้ JavaScript เพื่อจำลองเอฟเฟกต์ทั้งสองนี้ หลักการคือการใช้ setInterval หรือ settimeout เพื่อเปลี่ยนระยะห่างระหว่างองค์ประกอบหนึ่งกับองค์ประกอบอื่นเช่น xxx.style.left หรือ xxx.style.marginleft และเพิ่มความเร็วหลังจากการออกกำลังกายแต่ละครั้งเพื่อให้ผลของการเร่งการเคลื่อนไหวปรากฏขึ้น เช่นเดียวกับการชะลอการเคลื่อนไหว
นี่คือสองตัวอย่าง:
เร่งการเคลื่อนไหว
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> JavaScript Accelerated Motion </title>
<style type = "text/css">
* {มาร์จิ้น: 0; Padding: 0;}
.DIV1 {ความกว้าง: 100px; ความสูง: 100px; ความเป็นมา: #F60 URL (qiuweiguan.gif) ศูนย์กลางที่ไม่มีการทำซ้ำ;}
</style>
<script type = "text/javascript">
var $$ = function (id) {
ส่งคืน document.getElementById (id);
-
window.onload = function () {
var obtn = $$ ("btn1");
var odiv = $$ ("div1");
ตัวจับเวลา var = null;
var speed = 0;
obtn.onclick = function () {
ClearInterval (ตัวจับเวลา);
timer = setInterval (ฟังก์ชัน () {
ความเร็ว ++;
odiv.style.marginleft = odiv.offsetleft + ความเร็ว + "px";
}, 30);
-
-
</script>
</head>
<body id = "body">
<button id = "btn1"> go </button>
<div id = "div1"> </div>
</body>
</html>
หมายเหตุ: ในตัวอย่างนี้หลังจากคลิกไปบล็อก DIV จะยังคงเร่งความเร็วไปทางขวา
ลดการออกกำลังกาย
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> การเคลื่อนไหวลด JavaScript </title>
<style type = "text/css">
* {มาร์จิ้น: 0; Padding: 0;}
.DIV1 {ความกว้าง: 100px; ความสูง: 100px; ความเป็นมา: #F60 URL (qiuweiguan.gif) ศูนย์กลางที่ไม่มีการทำซ้ำ;}
</style>
<script type = "text/javascript">
var $$ = function (id) {
ส่งคืน document.getElementById (id);
-
window.onload = function () {
var obtn = $$ ("btn1");
var odiv = $$ ("div1");
ตัวจับเวลา var = null;
var speed = 30;
obtn.onclick = function () {
ClearInterval (ตัวจับเวลา);
timer = setInterval (ฟังก์ชัน () {
ความเร็ว - ;
odiv.style.marginleft = odiv.offsetleft + ความเร็ว + "px";
}, 30);
-
-
</script>
</head>
<body id = "body">
<button id = "btn1"> go </button>
<div id = "div1"> </div>
</body>
</html>
หมายเหตุ: ในตัวอย่างนี้หลังจากคลิกไปบล็อก DIV จะชะลอตัวไปทางด้านขวาจนกว่าความเร็วจะลดลงเป็นศูนย์ความเร็วจะกลายเป็นลบแล้วเร่งไปทางซ้าย