js动画相关函数的封装

/**
 * 获取滚动的距离，并做兼容性处理
 * @returns {{top: number, left: number}}  返回JSON数据top,left
 */
function scroll() {
  if (window.pageYOffset !== null) {
    return {
      top : window.pageYOffset,
      left: window.pageXOffset
    }
  } else if (document.compatMode === 'CSS1Compat') {
    return {
      top: document.documentElement.scrollTop,
      left: document.documentElement.scrollLeft
    }
  } else {
    return {
      top: document.body.scrollTop,
      left: document.body.scrollLeft
    }
  }
}

/**
 * 获取指定元素
 * @param id
 * @returns {any}
 */
function $(id) {
  return typeof id === 'string' ? document.getElementById(id) : null;
}

/**
 * 获取可视窗口的大小，兼容性
 * @returns {{w: number, h: number}}
 */
function getViewportOffset() {
  if (window.innerWidth) {
    return {
      w: window.innerWidth,
      h: window.innerHeight
    }
  } else {
    if (document.compatMode === "BackCompat") {
      return {
        w: document.body.clientWidth,
        h: document.body.clientHeight
      }
    } else {
      return {
        w: document.documentElement.clientWidth,
        h: document.documentElement.clientHeight
      }
    }
  }
}

/**
 * 匀速动画函数
 * @param {object}ele
 * @param {number}target
 * @param {number}speed
 */
function constant(ele, target, speed = 60) {
  // 1.清除定时器
  clearInterval(ele.timer);

  // 2.判断方向
  let dir = ele.offsetLeft < target ? speed : -speed;

  // 3.设置定时器
  ele.timer = setInterval(function () {
    ele.style.left = ele.offsetLeft + dir + 'px';

    if(Math.abs(target - ele.offsetLeft) <= speed) {
      clearInterval(ele.timer);
      ele.style.left = target + 'px';
    }
  }, speed)
}

/**
 * 获取css的样式值
 * @param {object}obj
 * @param attr
 * @returns {*}
 */
function getCSSAttrValue(obj, attr) {
  if(obj.currentStyle){ // IE 和 opera
    return obj.currentStyle[attr];
  }else {
    return window.getComputedStyle(obj, null)[attr];
  }
}

/**
 * 缓动动画
 * @param obj
 * @param json
 * @param fn
 */
function buffer(obj, json, fn) {
  // 1.1 清除定时器
  clearInterval(obj.timer);

  // 1.2 设置定时器
  var begin = 0, target = 0, speed = 0;
  obj.timer = setInterval(function () {
    // 1.3.0 旗帜
    var flag = true;
    for(var k in json){
      // 1.3 获取初始值
      if("opacity" === k){ // 透明度
        begin =  Math.round(parseFloat(getCSSAttrValue(obj, k)) * 100) || 100;
        target = parseInt(json[k] * 100);
      }else if("scrollTop" === k){
        begin = Math.ceil(obj.scrollTop);
        target = parseInt(json[k]);
      }else { // 其他情况
        begin = parseInt(getCSSAttrValue(obj, k)) || 0;
        target = parseInt(json[k]);
      }

      // 1.4 求出步长
      speed = (target - begin) * 0.2;

      // 1.5 判断是否向上取整
      speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);

      // 1.6 动起来
      if("opacity" === k){ // 透明度
        // w3c的浏览器
        obj.style.opacity = (begin + speed) / 100;
        // ie 浏览器
        obj.style.filter = 'alpha(opacity:' + (begin + speed) +')';
      }else if("scrollTop" === k){
        obj.scrollTop = begin + speed;
      }else {
        obj.style[k] = begin + speed + "px";
      }

      // 1.5 判断
      if(begin !== target){
        flag = false;
      }
    }

    // 1.3 清除定时器
    if(flag){
      clearInterval(obj.timer);

      console.log(fn);

      // 判断有没有回调函数
      if(fn){
        fn();
      }
    }
  }, 20);
}