js運動

在CSS3中，我們可以通過新增的過渡效果<code>[transition]</code>來實現運動效果,當然也可以通過js來模擬出來。

勻速運動

與之前的拖拽不同，拖拽是要跟蹤滑鼠的位置。而js運動效果主要通過定時器<code>[setInterval]</code>每次增加一個距離來模擬運動效果,但相同的是它們都需要開啟定位<code>[position]</code>屬性，改變<code>[top]</code>值、以及<code>[left]</code>值進行移動。

oDiv.onclick = function() {
        clearInterval(timer); //每次點選按鈕，清除前面的定時器
        timer = setInterval(function() {
            if (oDiv.offsetLeft > 600) {
                speed = -speed;
            }
            if (oDiv.offsetLeft == 600) {
                clearInterval(timer);
            } else {
                oDiv.style.left = oDiv.offsetLeft + speed + 'px';
            }
        }, 30);
    }

定時器有開啟，就必須要關閉，否則影響的就是記憶體。
<code>[clearInterval(timer)]//每次點選按鈕，清除前面的定時器</code>如果沒有這一句，在移動過程中的點選會再疊加一次。

---

上個例子中，我們並未限制它的移動範圍，所以它會移出頁面。
將<code>oDiv.offsetLeft + speed</code>的範圍限制在0到頁面的可視區的寬度;當然這個碰撞的效果還增加的高度的屬性。

在實際的應用中，我們很少用到勻速運動，主要因為它並沒有什麼變化。

緩衝運動

我們可以明顯的感覺到它與勻速運動的區別。越靠近目標，速度越小，直到降至0為止；
將勻速運動中的speed變數賦值為<code>600-oDiv.offsetLeft)/7</code>其中600，就是我們的目標位置，而7就是一個比例。

定點拋物線

主要運用了數學中的公式：
<code>y = ax^2 + bx+c</code>
我們假設x,y都為0;即拋物線在中心點，那麼c就為0：
<code>y = ax^2 + bx</code>

因為在頁面中我們知道x，y的起始位置，以及定點位置；然後自定義一個a<code>拋物線開口大小</code>最後就可以求得b的值；
<code>b=(y-ax^2)/x</code>
最終位移的距離就是：
<code>oDiv1.style.left=current.x + x+'px';
oDiv1.style.top=current.y+(aMath.pow(x,2)+bx)+'px';</code>

實際案例