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

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

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

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

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

應(yīng)用案例效果圖：

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

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

<body>

        <div id="div1">

            <span>

                分享到

            </span>

        </div>

    </body>

以下是Javascript 代碼

復(fù)制代碼代碼如下:

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