淺談Javascript如何實現勻速運動

2019-11-20 13:39:36

字體：大中小

來源：轉載

供稿：網友

網站上會經常用到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>