加速される動きとは、オブジェクトがより速く速く移動していることを意味します。減速された動きとは、オブジェクトがより遅く、遅くなることを意味します。 JavaScriptを使用して、これら2つの効果をシミュレートします。原則は、setintervalまたはsetimeoutを使用して、xxx.style.leftまたはxxx.style.marginleftなどの1つの要素と別の要素間の距離を動的に変更し、各エクササイズ後に速度を上げて、動きを加速する効果が現れるようにします。同じことが動きを減速させることにも当てはまります。
ここに2つの例があります。
動きを加速します
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title> javascript加速モーション</title>
<style type = "text/css">
* {マージン：0;パディング：0;}
.div1 {width：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速度= 0;
obtn.onclick = function（）{
ClearInterval（タイマー）;
Timer = setInterval（function（）{
速度++;
odiv.style.marginleft = odiv.offsetleft + speed + "px";
}、30）;
}
}
</script>
</head>
<body id = "body">
<ボタンID = "btn1"> go </button>
<div id = "div1"> </div>
</body>
</html>
注：この例では、Goをクリックした後、Divブロックは右に加速し続けます。
運動を減らします
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title> javascript削減の動き</title>
<style type = "text/css">
* {マージン：0;パディング：0;}
.div1 {width：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速度= 30;
obtn.onclick = function（）{
ClearInterval（タイマー）;
Timer = setInterval（function（）{
スピード - ;
odiv.style.marginleft = odiv.offsetleft + speed + "px";
}、30）;
}
}
</script>
</head>
<body id = "body">
<ボタンID = "btn1"> go </button>
<div id = "div1"> </div>
</body>
</html>
注：この例では、Goをクリックした後、Divブロックは速度がゼロに減少し、速度が負になり、左に加速するまで右に減速し続けます。