JS简单动画函数封装

简单动画函数封装

步长算法公式:（目标值-现在位置）/10;

利用当前元素距离父辈元素左边缘距离(offset Left属性)加上步长值来更改当前元素的left值

当前元素left值=当前元素距离父辈元素左边缘距离(offsetLeft属性)+step+'px';

注: 当前元素需要有定位！

代码部分

function animate(obj, target, callback) {
//要动的对象，目标位置，回调函数   callback = function() {}  调用的时候 callback()  
  // 先清除以前的定时器，只保留当前的一个定时器执行    
      clearInterval(obj.timer);   
      obj.timer = setInterval(function () {        // 步长值写到定时器的里面   
// 把我们步长值改为整数 不要出现小数的问题  
       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 && callback();    
                    }      
  // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10    
        obj.style.left = obj.offsetLeft + step + 'px';    }, 15);}

最后

以上就是要减肥裙子为你收集整理的JS简单动画函数封装的全部内容，希望文章能够帮你解决JS简单动画函数封装所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。