淺談Javascript如何實現勻速運動

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 淺談Javascript如何實現勻速運動

編輯：JavaScript綜合知識

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

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

應用案例效果圖：

淺談Javascript如何實現勻速運動

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

代碼如下:
<style type="text/css">
            #div1 {
                width: 150px;
                height: 200px;
                background: green;
                position: absolute;
                left: -150px;
            }
            #div1 span {
                position: absolute;
                width: 20px;
                height: 60px;
                line-height: 20px;
                background: blue;
                right: -20px;
                top: 70px;
            }
        </style>

代碼如下:
<body>
        <div id="div1">
            <span>
                分享到
            </span>
        </div>
    </body>

以下是Javascript 代碼

代碼如下:
<script type="text/javascript">
            window.onload=function(){
                var oDiv=document.getElementById("div1");
                oDiv.onmouseover=function(){
                    startMove(0);
                };
                oDiv.onmouseout=function(){
                    startMove(-150);
                };
            }
            var time=null;
            function startMove(iTraget){
                var oDiv=document.getElementById("div1");
                clearInterval(time);
                time=setInterval(function(){
                    var speed=0;
                    if(oDiv.offsetLeft>iTraget){
                        speed=-10;
                    }else{
                        speed=10;
                    }
                    if(oDiv.offsetLeft==iTraget){
                        clearInterval(time);
                    }else{
                        oDiv.style.left=oDiv.offsetLeft+speed+'px';
                    }
                },30);
            }
        </script>

思路：

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

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

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

規律：

* 假設

* left:30 iTarget:300 得出往右為正
* left:600 iTarget:50 得出往左為負
*
* 通過當前位置left 與目標點的關系 iTarget 推斷出速度的正負

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

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

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

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

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