JS小問題之——緩衝運動

標籤：圖片   注意   ceil   div   interval   記錄   cti   bsp   pre   

今天寫一個實現動畫緩衝的效果，原始碼用到了一個小技巧，之前覺得並沒有什麼用，後來覺得還是很有必要的，貼上來記錄一下。

代碼如下：

//圖片切換，淡入淡出效果    function show(a){        index=a        for(i=0;i<onum.length;i++)onum[i].className="";        onum[index].className="current";        clearInterval(timer);        console.log(oimg[0].offsetHeight)        var oimgtop=-(index*oimg[0].offsetHeight)        timer=setInterval(function(){            var iSpeed=(oimgtop-oul[0].offsetTop)/10;            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);            oul[0].offsetTop==oimgtop?clearInterval(timer):oul[0].style.top=oul[0].offsetTop+iSpeed+"px"        },30)    }

timer指向了一個周期函數是這段代碼實現緩衝效果的關鍵，通過每30ms計算一次oimgtop，並將其與目標值的差除以10就是我們每次需要增加/減少的量，可見每次的增加/減少量是在逐漸減少的，也就實現了緩衝效果。

但是之前我一直以為這樣不是永遠加不到目標值麼。

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

通過Math.ceil處理我們每次的增加量，來使我們快接近目標值的時候，每次增加的量都是1或者-1，這樣一步步靠近我們的目標值。

當 目標值=當前值 的時候，清除timer周期函數。這裡需要注意的是，目標值應該是一個整數！

 

JS小問題之——緩衝運動