码迷,mamicode.com
首页 > Web开发 > 详细

JS小问题之——缓冲运动

时间:2017-02-18 13:13:53      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:图片   注意   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小问题之——缓冲运动

标签:图片   注意   ceil   div   interval   记录   cti   bsp   pre   

原文地址:http://www.cnblogs.com/coderzzp/p/6412935.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!