淺談Javascript如何實現(xiàn)勻速運動

更新時間：2014年12月19日 16:15:39 投稿：hebedich

這篇文章主要介紹了淺談Javascript如何實現(xiàn)勻速運動的方法及相關(guān)代碼,需要的朋友可以參考下

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

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

應用案例效果圖：

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

復制代碼代碼如下:

<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>