欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2014年12月19日 16:15:39   投稿：hebedich  
這篇文章主要介紹了淺談Javascript如何實(shí)現(xiàn)勻速運(yùn)動(dòng)的方法及相關(guān)代碼,需要的朋友可以參考下

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

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

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

鼠標(biāo)移動(dòng)到分享上 ，左邊的div就會(huì)顯示出來(lái)。移開(kāi)會(huì)自己恢復(fù)。相信這個(gè)大家都會(huì)用到 很實(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>

思路：

樣式中初始的left是-150 這樣div就是縮在里面，給0 就會(huì)顯示出來(lái)。 那么我們只要變動(dòng)這個(gè)值就可以了

startMove 中的參數(shù) iTarget 是目標(biāo)點(diǎn) ，表示到哪個(gè)目標(biāo)點(diǎn)會(huì)停下來(lái)。

控制speed 的大小 就能控制運(yùn)動(dòng)的快慢。如果達(dá)到目標(biāo)點(diǎn) 就停止定時(shí)器 。

規(guī)律：

*  假設(shè)

*         left:30           iTarget:300     得出    往右  為正
*         left:600         iTarget:50       得出    往左  為負(fù)
* 
* 通過(guò)當(dāng)前位置left 與目標(biāo)點(diǎn)的 關(guān)系 iTarget 推斷出 速度的正負(fù)


注意： 一上來(lái)就要關(guān)了定時(shí)器，因?yàn)槭敲看我苿?dòng)到分享到，都會(huì)開(kāi)個(gè)定時(shí)器，開(kāi)的越多相對(duì)來(lái)說(shuō)速度就越快，因?yàn)橥瑫r(shí)會(huì)有多個(gè)定時(shí)器執(zhí)行。

所以每次要保證一個(gè)定時(shí)器工作。

遵循：函數(shù)功能一樣，參數(shù)越少越好的原則 ，所以根據(jù)上面的規(guī)律把speed 并不是作為參數(shù)傳入。

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

所以程序也是一樣的，這里就把速度這個(gè)傳參去掉了。

當(dāng)然現(xiàn)在的這個(gè)運(yùn)動(dòng)框架還會(huì)有許多問(wèn)題，在之后會(huì)陸續(xù)解決。下篇文章，我們來(lái)探討下勻速運(yùn)動(dòng)如何停止。

相關(guān)文章

最新評(píng)論