الحركة المتسارعة تعني أن الكائن يتحرك بشكل أسرع وأسرع ؛ الحركة المزعجة تعني أن الكائن يتحرك أبطأ وأبطأ. الآن استخدم JavaScript لمحاكاة هذين التأثيرين. المبدأ هو استخدام setInterval أو setTimeout لتغيير المسافة بين عنصر وعنصر آخر ، مثل xxx.style.left أو xxx.style.marginleft ، ثم زيادة السرعة بعد كل تمرين ، بحيث يظهر تأثير تسريع الحركة. وينطبق الشيء نفسه على تباطؤ الحركة.
هنا مثالان:
حركة تسريع
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> JavaScript Motion Motion </title>
<type type = "text/css">
* {الهامش: 0 ؛ الحشو: 0 ؛}
.div1 {العرض: 100px ؛ الارتفاع: 100px ؛ الخلفية: #F60 url (qiuweiguan.gif) مركز مركز عدم التكرار ؛}
</style>
<script type = "text/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 = setInterval (function () {
السرعة ++ ؛
odiv.style.marginleft = odiv.offsetleft + speed + "px" ؛
} ، 30) ؛
}
}
</script>
</head>
<body id = "body">
<button id = "btn1"> go </utton>
<div id = "div1"> </viv>
</body>
</html>
ملاحظة: في هذا المثال ، بعد النقر فوق GO ، ستستمر كتلة Div في التسارع إلى اليمين.
تقليل التمرين
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> حركة الحد من JavaScript </title>
<type type = "text/css">
* {الهامش: 0 ؛ الحشو: 0 ؛}
.div1 {العرض: 100px ؛ الارتفاع: 100px ؛ الخلفية: #F60 url (qiuweiguan.gif) مركز مركز عدم التكرار ؛}
</style>
<script type = "text/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 = setInterval (function () {
سرعة - ؛
odiv.style.marginleft = odiv.offsetleft + speed + "px" ؛
} ، 30) ؛
}
}
</script>
</head>
<body id = "body">
<button id = "btn1"> go </utton>
<div id = "div1"> </viv>
</body>
</html>
ملاحظة: في هذا المثال ، بعد النقر فوق GO ، ستستمر كتلة DIV في التباطؤ إلى اليمين حتى تنخفض السرعة إلى الصفر ، تصبح السرعة سلبية ، ثم تسارع إلى اليسار.