Le mouvement accéléré signifie qu'un objet se déplace de plus en plus rapidement; Le mouvement décéléré signifie qu'un objet se déplace de plus en plus lent. Utilisez maintenant JavaScript pour simuler ces deux effets. Le principe consiste à utiliser SetInterval ou Settimeout pour modifier dynamiquement la distance entre un élément et un autre élément, tel que xxx.style.left ou xxx.style.marginleft, puis augmenter la vitesse après chaque exercice, afin que l'effet d'accélérer le mouvement apparaisse. Il en va de même pour décélérer le mouvement.
Voici deux exemples:
Accélérer le mouvement
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> JavaScript Accelerated Motion </Title>
<style type = "text / css">
* {margin: 0; rembourrage: 0;}
.div1 {largeur: 100px; hauteur: 100px; CONTEXTE: # F60 URL (qiuweiguan.gif) centre de centre sans répétition;}
</ style>
<script type = "text / javascript">
var $$ = fonction (id) {
return document.getElementById (id);
}
window.onload = function () {
var obtn = $$ ("btn1");
var odiv = $$ ("div1");
var timer = null;
Var Speed = 0;
obtn.onclick = function () {
ClearInterval (temporisateur);
timer = setInterval (function () {
vitesse ++;
odiv.style.marginleft = odiv.offsetleft + speed + "px";
}, 30);
}
}
</cript>
</ head>
<body id = "body">
<Button id = "btn1"> aller </ftones>
<div id = "div1"> </div>
</docy>
</html>
Remarque: Dans cet exemple, après avoir cliqué sur Go, le bloc DIV continuera d'accélérer vers la droite.
Réduire l'exercice
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> Mouvement de réduction JavaScript </Title>
<style type = "text / css">
* {margin: 0; rembourrage: 0;}
.div1 {largeur: 100px; hauteur: 100px; CONTEXTE: # F60 URL (qiuweiguan.gif) centre de centre sans répétition;}
</ style>
<script type = "text / javascript">
var $$ = fonction (id) {
return document.getElementById (id);
}
window.onload = function () {
var obtn = $$ ("btn1");
var odiv = $$ ("div1");
var timer = null;
Var Speed = 30;
obtn.onclick = function () {
ClearInterval (temporisateur);
timer = setInterval (function () {
vitesse - ;
odiv.style.marginleft = odiv.offsetleft + speed + "px";
}, 30);
}
}
</cript>
</ head>
<body id = "body">
<Button id = "btn1"> aller </ftones>
<div id = "div1"> </div>
</docy>
</html>
Remarque: Dans cet exemple, après avoir cliqué sur Go, le bloc Div continuera de décélérer vers la droite jusqu'à ce que la vitesse diminue à zéro, la vitesse devient négative, puis accélérer vers la gauche.