缓动动画函数

function buffer(obj, target) {  
    // 1. 清除定时器    
    clearInterval(obj.timer);    
    // 2. 设置定时器    
    obj.timer = setInterval(function () {        
           // 2.1 求出步长        
           var speed = (target - obj.offsetLeft) / 20;        
           console.log(speed);        
           speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);        
           console.log(speed);        
           // 2.2 设置动画        
           obj.style.left = obj.offsetLeft + speed + 'px';        
           obj.innerHTML = obj.offsetLeft;        
           // 2.3 清除定时器        
           if(obj.offsetLeft == target){           
                  clearInterval(obj.timer);        
            }    
            }, 20);
}
/* 
   * 缓动动画 
   * obj: 要做动画的元素 
   * json: 要做动画的属性键值对
   * fn: 回调函数 
  */ 
  function Buffer(obj, json, fn) {     
      // 1. 清除定时器     
      clearInterval(obj.timer);     
      // 2. 设置定时器     
      var flag = true, begin, target;
      obj.timer = setInterval(function () {         
          // 2.1 遍历json         
          for(var k in json){             
             // 2.1.1 获取做动画属性的初始值            
             if('opacity' == k){ // 透明度               
                begin = parseInt(parseFloat(getCssStyleAttr(obj, k)) *100) || 0;  
                target = parseInt(parseFloat(json[k])*100); 
             }else { // 其他动画               
                begin = parseInt(getCssStyleAttr(obj, k));   
                target = parseInt(json[k]);    
             }    
 // 2.1.2 获取动画的步长      
             var speed = (target - begin) / 20;
             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
             // 2.1.3 设置缓动动画
             if('opacity' == k ){ // 透明度
                   obj.style.opacity = (begin + speed) / 100;
                   obj.style.filter = 'alpha(opacity='+ (begin + speed) +')';
             }else if('zIndex' == k){
                   obj.style.zIndex = json[k];
            }else { // 其他情况 
                  obj.style[k] = begin + speed + 'px'; 
            }            
            // 2.1.4 判断是否清除定时器
            flag = (begin != target) ? false : true;
           }         
           // 2.2 清除定时器
           if(flag){
               clearInterval(obj.timer);
               //判断
               if(fn){
                   fn(); // 执行函数
               }
            }
       }, 20); 
  }

  function $(id) {
      return document.getElementById(id);
  }

  function getCssStyleAttr(obj, attr) {
      if(obj.currentStyle){
          return obj.currentStyle[attr];
      }else {
          return window.getComputedStyle(obj, null)[attr];
      }
  }

猜你喜欢

转载自blog.csdn.net/qq_44472722/article/details/89204299