js运动裤（封装三），有回调函数--弹性运动动画和缓冲运动动画

1.弹性运动动画：

使用方法：  对象，运动目标值，是否从中点开始运动，运动完成回调函数

var oIco = document.getElementById('ico');
fiexible(oIco,{  
     left:this.offsetLeft
});

2.缓冲运动动画：

buffer(oIco,{
    left:this.offsetLeft
});

move.js运动库

/**
 * @author 郑印
 */

/**
 * 获取样式
 * @param {Object} obj
 * @param {Object} attr
 */
function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];
    }
}
/**
 * 缓冲运动动画
 * @param {Object} obj        对象
 * @param {Object} json        运动目标值
 * @param {Object} speed    速度
 * @param {Object} fn        运动完成回调函数
 */
function buffer(obj,json,speed,fn){
     var speed = speed || 5;
     clearInterval(obj.t)        //开始前关闭原有的定时器
     obj.t=setInterval(function(){
          var endMove=true;       //设置运动停止初始值
          for(var attr in json){
                  // iCur 更新运动元素当前的属性值
                 if(attr=='opacity'){    //对透明度单独处理
                      var iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
                 }else{                    //普通样式
                      var iCur = parseInt(getStyle(obj, attr));
                 }
                 // 速度取整
                   var iSpeed=(json[attr]-iCur)/speed>0?Math.ceil((json[attr]-iCur)/speed):Math.floor((json[attr]-iCur)/speed);
                  //检测是否到目标点
                  if(iCur!=json[attr]){
                      endMove=false;        
                  }
                  //设置样式，对透明度单独处理
                 if(attr=='opacity'){
                   obj.style.filter='alpha(opacity='+(iCur+iSpeed)+')';
                   obj.style.opacity=(iCur+iSpeed)/100;
                 }else{
                   obj.style[attr]=iCur+iSpeed+'px';
                 }
          }
          //运动完成，关闭定时器
          if(endMove){
                 clearInterval(obj.t)
                obj.t = null;
                 if(fn){    //回调函数存在，调用回调函数，并把当前对象做为this
                    fn.call(obj);
                }
          }
     },30);
}
/**
 * 弹性运动动画 
 * @param {Object} obj        对象
 * @param {Object} json        运动目标值
 * @param {Object} way        是否从中点开始运动
 * @param {Object} fn        运动完成回调函数
 */
function fiexible(obj,json,way,fn){
    /*** 按坐标运动  ***/
    if(way === true){
        //检测left 与 top 是否都有值
        if(typeof json.left !='undefined' && typeof json.top !='undefined'){
            var x = Math.floor(json.left + json.width/2);    //计算X轴中心点
            var y = Math.floor(json.top + json.height/2);    //计算Y轴中心点
            //设置初始的left 和 top 值 并让元素显示
            obj.style.display = 'block';
            obj.style.left = x-(parseInt(getStyle(obj,'width'))/2) + 'px';  
            obj.style.top = y-(parseInt(getStyle(obj,'height'))/2) + 'px';
            //清除margin
            obj.style.margin = 0 + 'px';
        }
    }
    var newJson = {}
    /*** 往参数中添加位置属性 用于设置元素的运动初始点 ***/
    for(var arg in json){
        newJson[arg] = [json[arg], parseInt(getStyle(obj,arg))]
        //newJson[arg] = [运动目标点,运动初始点];
    }
    var oSite = {};
    /** 添加单独的属性值  **/
    for(var attr in newJson){
        oSite[attr] ={iSpeed:0,curSite:newJson[attr][1],bStop:false};
        //oSite[attr] = {运动初始速度,运动当前值,判断是否完成运动依据};
    }
    /** 运动开始前关闭本身的定时器 **/
    clearInterval(obj.t);
    obj.t = setInterval(function(){
        /*** 循环运动属性  ***/
        for (var attr in newJson) {
            /** 运动状态  **/
            oSite[attr].bStop = false;
            // iCur 更新运动元素当前的属性值
             if(attr=='opacity'){    //对透明度单独处理
                  var iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
             }else{                    //普通样式
                  var iCur = parseInt(getStyle(obj, attr));
             }
            oSite[attr].iSpeed += (newJson[attr][0] - iCur) /5;        //加速    
            oSite[attr].iSpeed *= 0.75;                                //磨擦
            oSite[attr].curSite += oSite[attr].iSpeed;                //更新运动的当前位置
            //运动停止条件 速度绝对值小于1 并且 当前值与目标值的差值的绝对值小于一
            if (Math.abs(oSite[attr].iSpeed) < 1 && Math.abs(iCur - newJson[attr][0]) < 1) {
                
                //设置样式，对透明度单独处理
                 if(attr=='opacity'){
                   obj.style.filter='alpha(opacity='+newJson[attr][0]+')';
                   obj.style.opacity=newJson[attr][0]/100;
                }else{
                   obj.style[attr] = newJson[attr][0] + 'px';    //设置到目标点
                }
                
                oSite[attr].bStop = true;                    //设置当前属性运动是否完成
            }
            else {
                //更新运动对象的属性值
                if(attr=='opacity'){
                   obj.style.filter='alpha(opacity='+oSite[attr].curSite+')';
                   obj.style.opacity=oSite[attr].curSite/100;
                }else{
                   obj.style[attr] = oSite[attr].curSite + 'px';    
                }
            }
        }
        // 校验定时器停止
        if(checkStop(oSite)){
            clearInterval(obj.t);
            if(fn){
                fn.call(obj)
            }
        }
    }, 30);
    /** 校验运动是否完成 **/
    function checkStop(oSite){
        for(var i in oSite){
            if(oSite[i].bStop === false){
                return oSite[i].bStop;
            }
        }
        return true;
    }
}