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

[js] view plaincopy
<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 中的參數(shù) iTarget 是目標(biāo)點(diǎn)，表示到哪個目標(biāo)點(diǎn)會停下來。

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

規(guī)律：

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

注意：一上來就要關(guān)了定時器，因?yàn)槭敲看我苿拥椒窒淼?，都會開個定時器，開的越多相對來說速度就越快，因?yàn)橥瑫r會有多個定時器執(zhí)行。所以每次要保證一個定時器工作。

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

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

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

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

上一篇：淺談 javascript 對象模型和 function 對象

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

思路：

規(guī)律：