移入移出動(dòng)畫效果的實(shí)現(xiàn)主要用到了定時(shí)器。定時(shí)器即 setInterval() 方法可按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。它會(huì)不停地調(diào)用函數(shù)，直到clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。

HTML

<div id="div"><span>share</span> </div>

CSS

div{width: 250px;height: 30px;background-color: blue;position: absolute;left: -200px;top: 50px;} span{float: right;color: #fff;}

JS，移出效果就是改變?cè)撛亟^對(duì)定位的 left 的值，判斷到了0位置時(shí)候結(jié)束，清除定時(shí)器。移入效果則完全相反。

var oDiv=document.getElementById("div"); oDiv.onmouseover=function(){startMove(); }; oDiv.onmouseout=function(){startMoveOut(); } var timer=null; function startMove(){clearInterval(timer);var oDiv=document.getElementById("div");timer=setInterval(function(){if(oDiv.offsetLeft == 0){clearInterval(timer);}else{oDiv.style.left=oDiv.offsetLeft+5+"px";}},30); } function startMoveOut(){clearInterval(timer);var oDiv=document.getElementById("div");timer=setInterval(function(){if(oDiv.offsetLeft == -200){clearInterval(timer);}else{oDiv.style.left=oDiv.offsetLeft-5+"px";}},30); }

上述代碼顯然是可以優(yōu)化的，實(shí)現(xiàn)同樣功能的函數(shù)，可以通過傳參來(lái)壓縮成一個(gè)函數(shù)。觀察兩個(gè)函數(shù)，它們的差別就在于判斷的目標(biāo)位置不同，移動(dòng)時(shí)改變的距離不同。

var oDiv=document.getElementById("div"); oDiv.onmouseover=function(){startMove(5,0); }; oDiv.onmouseout=function(){startMove(-5,-200); } var timer=null; function startMove(speed,iTarget){clearInterval(timer);var oDiv=document.getElementById("div");timer=setInterval(function(){if(oDiv.offsetLeft == iTarget){clearInterval(timer);}else{oDiv.style.left=oDiv.offsetLeft+speed+"px";}},30); }

為了提升性能，傳參的數(shù)量越少越好。比較參數(shù)speed和iTarget，其中更重要關(guān)鍵的參數(shù)應(yīng)該是iTarget，可聯(lián)想日常生活中買火車票必須確定自己的目的地，但是速度無(wú)所謂的，因?yàn)橛芯G皮火車，動(dòng)車，高鐵...

var oDiv=document.getElementById("div"); oDiv.onmouseover=function(){startMove(0); }; oDiv.onmouseout=function(){startMove(-200); } var timer=null; function startMove(iTarget){clearInterval(timer);var oDiv=document.getElementById("div");timer=setInterval(function(){var speed=0;if(oDiv.offsetLeft>iTarget){speed=-5;}else{speed=5;}if(oDiv.offsetLeft == iTarget){clearInterval(timer);}else{oDiv.style.left=oDiv.offsetLeft+speed+"px";} },30); }

移入移出的動(dòng)畫效果實(shí)現(xiàn)不是最關(guān)鍵的，主要的是學(xué)會(huì)對(duì)代碼的優(yōu)化是要一步一步的，最大可能精簡(jiǎn)程序的性能。

總結(jié)

以上是生活随笔為你收集整理的JS动画-移入移出的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。