Javascriptアナログ加速運動と減速運動コードの共有
2497 ワード
加速運動、つまり物体が動く時速度はますます速くなります.減速運動とは、物体が動く時に速度がだんだん遅くなります.今はJavascriptを使ってこの二つの効果をシミュレーションしています.原理はsetIntervalまたはsetTimeoutを使って、もう一つの要素との距離を動的に変えて、xxx.style.leftまたはxx.style.margeftを使って、運動後に速度を増加させます.このように運動の効果が現れます.減速運動は同じです.
以下は2つの例です.
加速運動
減速運動
以下は2つの例です.
加速運動
Javascript
<br> var $$ = function (id) {
<br> return document.getElementById(id);
<br> }
<br> window.onload = function () {
<br> var oBtn = $$("btn1");
<br> var oDiv = $$("div1");
<br> var timer = null;
<br> var speed = 0;
<br> oBtn.onclick = function () {
<br> clearInterval(timer);
<br> timer = setInterval(function () {
<br> speed ++;
<br> oDiv.style.marginLeft = oDiv.offsetLeft + speed + "px";
<br> }, 30);
<br> }
<br> }
<br>
注:この例では、GOをクリックすると、divブロックはまっすぐ右に加速運動をします.減速運動
Javascript
<br> var $$ = function (id) {
<br> return document.getElementById(id);
<br> }
<p></p>
<p>window.onload = function () {<br> var oBtn = $$("btn1");<br> var oDiv = $$("div1");<br> var timer = null;<br> var speed = 30;<br> oBtn.onclick = function () {<br> clearInterval(timer);<br> timer = setInterval(function () {<br> speed ― ;<br> oDiv.style.marginLeft = oDiv.offsetLeft + speed + "px";<br> }, 30);<br> }<br> }<br>