Beschleunigte Bewegung bedeutet, dass sich ein Objekt schneller und schneller bewegt; Die verzögerte Bewegung bedeutet, dass sich ein Objekt langsamer und langsamer bewegt. Verwenden Sie nun JavaScript, um diese beiden Effekte zu simulieren. Das Prinzip besteht darin, SetInterval oder SetTimeout zu verwenden, um den Abstand zwischen einem Element und einem anderen Element wie xxx.style.left oder xxx.style.marginleft dynamisch zu ändern und dann die Geschwindigkeit nach jeder Übung zu erhöhen, sodass der Effekt der Beschleunigung der Bewegung erscheint. Gleiches gilt für die Verlauf der Bewegung.
Hier sind zwei Beispiele:
Bewegung beschleunigen
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> JavaScript Accelerated Motion </title>
<style type = "text/css">
* {Margin: 0; Polsterung: 0;}
.div1 {width: 100px; Höhe: 100px; Hintergrund: #F60 URL (Qiuweiguan.gif) No-Repeat Center;}
</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);
timer = setInterval (function () {
Geschwindigkeit ++;
odiv.style.marginLeft = odiv.offsetleft + speed + "px";
}, 30);
}
}
</script>
</head>
<body id = "body">
<button id = "btn1"> go </button>
<div id = "div1"> </div>
</body>
</html>
HINWEIS: In diesem Beispiel wird nach dem Klicken auf Go der Div -Block weiter nach rechts beschleunigt.
Bewegung reduzieren
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> JavaScript Reduktionsbewegung </title>
<style type = "text/css">
* {Margin: 0; Polsterung: 0;}
.div1 {width: 100px; Höhe: 100px; Hintergrund: #F60 URL (Qiuweiguan.gif) No-Repeat Center;}
</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 Geschwindigkeit = 30;
obtn.onclick = function () {
ClearInterval (Timer);
timer = setInterval (function () {
Geschwindigkeit - ;
odiv.style.marginLeft = odiv.offsetleft + speed + "px";
}, 30);
}
}
</script>
</head>
<body id = "body">
<button id = "btn1"> go </button>
<div id = "div1"> </div>
</body>
</html>
HINWEIS: In diesem Beispiel wird nach dem Klicken auf GO der Div -Block weiter nach rechts verlangsamt, bis die Geschwindigkeit auf Null abnimmt, die Geschwindigkeit negativ und dann nach links beschleunigt.