欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascipt变速运动问题解决

程序员文章站 2022-03-16 11:30:45
今天在实现dom对象变速运动的时候发现了一个问题,以下是js代码关于速度的部分: timer = setinterval(function(){ //......

今天在实现dom对象变速运动的时候发现了一个问题,以下是js代码关于速度的部分:

timer = setinterval(function(){
    //...
    console.log(odiv.offsetleft);//每次跑剩余行程的10分之一,以达到速度减缓的效果
    odiv.style.left = odiv.offsetleft+(target-odiv.offsetleft)/10+'px';
    //...
}, 30);

从效果上看是没问题的,但从日志看很明显就有问题:

javascipt变速运动问题解决

可以看出每次移动都是对计算值进行了四舍五入取整,最终当计算值小于0.5时进入了死循环。

当计算值小于1的时候统一按1处理

odiv.style.left = odiv.offsetleft+math.max((target-odiv.offsetleft)/10, 1)+'px';