淺談Javascript如何實現等速運動_javascript技巧

網站上會常用到Javascript 的運動，這次與大家分享一些運動的基本應用 。 方便大家在開發中能夠直接使用。

程式碼簡單易懂，適用於初學者。最後會一步一步整理出一套自己的運動框架。

應用案例效果圖：

滑鼠移到分享上 ，左邊的div就會顯示出來。移開會自己恢復。相信這個大家都會用到 很實用，下面看看程式碼是如何實現的。

複製程式碼 程式碼如下:

複製程式碼 程式碼如下:

       

           
                分享於
           
       

   

以下是Javascript 程式碼

複製程式碼 程式碼如下:

            window.onload=function(){
                var oDiv=document.getElementById("div1");
                oDiv.onmouseover=function(){
                    開始移動(0);
                };
                oDiv.onmouseout=function(){
                    開始移動(-150);
                };
            }
            var time=null;
            函數 startMove(iTraget){
                var oDiv=document.getElementById("div1");
                清除間隔(時間);
                時間=setInterval(function(){
                    var speed=0;
                    if(oDiv.offsetLeft>iTraget){
                        速率=-10;
                    }其他{
                        速率=10;
                    }
                    if(oDiv.offsetLeft==iTraget){
                        清除間隔(時間);
                    }其他{
                        oDiv.style.left=oDiv.offsetLeft 速率 'px';
                    }
                },30);
            }
        腳本>

思路：

樣式中初始的left是-150 這樣div就是縮在裡面，給0 就會顯示出來。 那我們只要變動這個值就可以了

startMove 中的參數 iTarget 是目標點 ，表示到哪個目標點會停下來。

控制speed 的大小 就能控制運動的快慢。如果達到目標點 就停止定時器 。

規律：

*  假設

*         left:30           iTarget:300     得    為正值至右下> *         left:600         iTarget:50       求    往左  為負
* 
* 透過目前位置left 與目標點的 關係 iTarget 推斷出 速度的正負

注意： 一上來就要關了定時器，因為是每次移動到分享到，都會開個定時器，開的越多相對來說速度就越快，因為同時會有多個定時器執行。

所以每次要確保一個定時器工作。

遵循：函數函數一樣，參數越少越好的原則 ，所以根據上面的規律把speed 並不是作為參數傳入。

舉個生活中的例子：你搭計程車，告訴計程車司機已100碼的速度到哪哪哪，一般是不可能的吧。搭計程車你不可能告訴師傅你要跑多快

所以程式也是一樣的，這裡就把速度這個傳參去掉了。

當然現在的這個運動框架還會有許多問題，在之後會陸續解決。下篇文章，我們來探討下勻速運動如何停止。