动画函数的使用

晕fufufu

于 2022-05-30 16:10:05 发布

阅读量96

点赞数

分类专栏： Dom 文章标签：动画 javascript 开发语言

本文链接：https://blog.csdn.net/Paolooo/article/details/124911355

版权

Dom 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

function animate(obj,target,callback){
    //先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function(){
   // 步长值写到定时器的里面
   // 把我们步长值改为整数 不要出现小数的问题
   // var step =Math.ceil(target - obj.offsetLeft) /10;
   var step = (target - obj.offsetLeft) / 10;
   step = step > 0 ? Math.ceil(step) : Math.floor(step);
   if(obj.offsetLeft ==target){
       // 停止动画  本质是停止定时器
       clearInterval(obj.timer);
       // 回调函数写到定时器里面
       if (callback){
           // 调用函数
           callback();
       }
   }
   // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式:(目标值-现在的位置)/10
   obj.style.left=obj.offsetLeft+ step +'px';
},30);
}