JavaScriptで加減速モーションコードをシミュレートする_javascriptスキル

加速運動は、物体の動きがますます速くなることを意味し、減速運動は、物体の動きがますます遅くなることを意味します。ここで、JavaScript を使用してこれら 2 つの効果をシミュレートします。原理は、setInterval または setTimeout を使用して、ある要素と別の要素 (xxx.style.left または xxx.style.marginLeft など) の間の距離を動的に変更し、それぞれの後で速度を上げることです。このようにして加速運動の効果が現れますが、減速運動でも同様です。

ここに 2 つの例があります:

動きを加速する

コードをコピーします コードは次のとおりです:

<頭>



<スクリプトタイプ="text/javascript">
var $$ = 関数 (id) {
return document.getElementById(id);
}
window.onload = function () {
var oBtn = $$("btn1");
var oDiv = $$("div1");
var timer = null;
var 速度 = 0;
oBtn.onclick = function () {
clearInterval(タイマー);
timer = setInterval(function () {
速度 ;
oDiv.style.marginLeft = oDiv.offsetLeft 速度 "px";
}, 30);
}
}



GO

注: この例では、GO をクリックした後、div ブロックが右に加速します

減速動作

コードをコピーします コードは次のとおりです:

<頭>



<スクリプトタイプ="text/javascript">
var $$ = 関数 (id) {
return document.getElementById(id);
}

window.onload = function () {
var oBtn = $$("btn1");
var oDiv = $$("div1");
var timer = null;
var 速度 = 30;
oBtn.onclick = function () {
clearInterval(タイマー);
timer = setInterval(function () {
スピード — ;
oDiv.style.marginLeft = oDiv.offsetLeft 速度 "px";
}, 30);
}
}



GO

注: この例では、GO をクリックした後、div ブロックは速度がゼロになるまで右に減速し続け、速度が負の値になり、その後左に加速します