10.6 综合 封装 完美版

/**

• Created by Administrator on 2017/4/26.
  */

/**

• 匀速运动框架
• @param obj
• @param target
• @param speed
  */
  function constant(obj,target,speed) {
  clearInterval(obj.timer);
  //开始动画
  obj.timer = setInterval(function () {
  //让box做匀速动画
  var MySpeed = target>obj.offsetLeft?speed:-speed;
  obj.style.left = obj.offsetLeft + MySpeed +'px';
  if(Math.abs(target-obj.offsetLeft) {
  clearInterval(obj.timer);
  obj.style.left = target +'px';
  }
  },20);
  }

/**

• 封装获取CSS属性的方法
• @param obj
• @param attr
• @returns {*}
  */
  function getCSSAttr(obj,attr) {
  //先判断ie
  if(obj.currentStyle)
  {
  return obj.currentStyle[attr];
  }
  else
  {
  return getComputedStyle(obj)[attr];
  }
  }

/**

• 封装缓动动画库

• @param obj

• @param json

• @param fn
  */
  function buffer(obj,json,fn) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {

   //定义一个变量作为旗帜
   var isStop = true;
   for (var key in json)
   {
       //取值判断 是否是透明度问题
       if ('opacity' == key) {
  
            var begin = parseFloat(getCSSAttr(obj,key))==0?0:parseInt(parseFloat(getCSSAttr(obj, key)) * 100) || 100;
  
           var target = parseInt(json[key] * 100);
       }
       //判断key是否是scrollTop
       else if('scrollTop'==key)
       {
           var begin = obj.scrollTop;
  
           var target = json[key];
       }
       //其他情况 (比如说;width,height,top left)
       else {
           var begin = parseInt(getCSSAttr(obj, key));
           var target = parseInt(json[key]);
       }
       var speed = (target - begin) / 20;
       speed = target > begin ? Math.ceil(speed) : Math.floor(speed);
  
  
       //判断赋值情况
       if ('opacity' == key)
       {
         //是否是火狐或者谷歌
           obj.style.opacity = (speed + begin) /100;
  
           //是否是ie
           obj.style.filter = 'alpha(opacity:'+(speed+begin)+')';
       }
  
       //判断Zindex赋值
       else if('zIndex'==key)
       {
         obj.style.zIndex = parseInt(json[key]);
       }
       else if('scrollTop'==key)
       {
           obj.scrollTop = speed +begin;
       }
       else
       {
           obj.style[key] = speed + begin + 'px';
       }
  
       if(begin!=target)
       {
           isStop = false;
       }
   }
  
   //判断清除定时器的时机
   if (isStop){
       clearInterval(obj.timer);
  
       //加回调
       //先判断是否传入了回调
       if(fn) {
           //执行回调
           fn();
       }
   }
  

  },20);
  }

/**

• 获取scrollTop和scrollLeft
• @returns {*}
  */
  function scroll() {
  if(window.pageYOffset !== null){ // ie9+ 和 最新浏览器
  return {
  left: window.pageXOffset,
  top: window.pageYOffset
  }
  }else if(document.compatMode == 'CSS1Compat'){ // 非怪异浏览器
  return{
  left: document.documentElement.scrollLeft,
  top: document.documentElement.scrollTop
  }
  }
  return{
  left: document.body.scrollLeft,
  top: document.body.scrollTop
  }
  }

/**

• 封装标签显示
• @param tagId
• @returns {string}
  */
  function show(tagId) {
  return document.getElementById(tagId).style.display = 'block';
  }

/**

• 封装标签隐藏
• @param tagId
• @returns {string}
  */
  function hide(tagId) {
  return document.getElementById(tagId).style.display = 'none';
  }

/**

• 封装$函数获取id
• @param tagId
• @returns {Element}
  */
  function $(tagId)
  {
  return typeof tagId==='string'?document.getElementById(tagId):tagId;
  }

/**

• 封装获取TagName方法
• @param tag
• @returns {NodeList}
  */
  function getTag(tag) {
  return typeof tag==='string'?document.getElementsByTagName(tag):tag;
  }

/**

• 封装获取ClassName方法

• @param className

• @returns {*}
  /
  function getClass(className) {
  //1.判断当前浏览器是否支持
  if (document.getElementsByClassName) {
  return document.getElementsByClassName(className);
  }
  //2.不支持的浏览器
  var allTags = document.getElementsByTagName('');

  var arr = [];
  //3.遍历
  for (var i = 0; i < allTags.length; i++) {
  //3.1.判断遍历得到的所有标签的className是否和函数外部传入的className相等

   if (allTags[i].className == className) {
       arr.push(allTags[i]);
   }
   //3.2.如果相等,就应该留下来
  

  }

  //千万不要忘记返回数组
  return arr;
  }

/**

• 得到一个兼容的获取屏幕的宽度和高度
• @returns {*}
  */
  function client() {
  //1.判断是否是ie9+和最新浏览器
  if(window.innerWidth!=null)
  {
  return {
  width:window.innerWidth,
  height:window.innerHeight
  }
  }
  //标准浏览器
  else if(document.compatMode=='CSS1Compat')
  {
  return{
  width:document.documentElement.clientWidth,
  height:document.documentElement.clientHeight
  }
  }
  //3.怪异模式
  else {
  return{
  width:document.body.clientWidth,
  height:document.body.clientHeight
  }
  }

}