JS 浏览器兼容工具库

/**
 * @获取元素id
 * @param {String}id 
 */
function eleId(id) {
    return typeof id === "string" ? document.getElementById(id) : null;
}
/**
 * @设置标签中的文本内容 使用textContent --->谷歌火狐支持，IE8不支持
 *  innerText --->谷歌火狐支持，IE8都支持
 * @param {Object}ele
 * @param {String}text
 */
function setInnerText(ele,text) {
    if(typeof ele.innerText !== "undefined") {
        ele.textContent = text;
    } else {
        ele.innerText = text;
    }
}
/**
 * @获取任意标签中的文本内容
 * @param {Object}ele
 */
function getInnerText(ele) {
    if(typeof ele.innerText !== "undefined") {
        return ele.textContent;
    } else {
        return ele.innerText;
    }
}

/**
 * @获取父级元素下的第一个子元素 
 * @param {Object} ele
 * @return: Object
 */
function getFirstElement(ele) {
    if(ele.firstElementChild) {
        return ele.firstElementChild;
    } else {
        var firstEle = ele.firstChild;      // 兼容IE
        while(firstEle !== null && firstEle.nodeType !== 1) {
            firstEle = firstEle.nextSibling;
        }
        return firstEle;
    }
}
/**
 * @获取父级元素下的最后一个子元素
 * @param {Object} ele
 * @return: Object
 */
function getLastElement(ele) {
    if(ele.lastElementChild) {
        return ele.lastElementChild;
    } else {
        var lastEle = ele.lastChild;      // 兼容IE
        while(lastEle !== null && lastEle.nodeType !== 1) {
            lastEle = lastEle.previousSibling;
        }
        return lastEle;
    }
}
/**
 * @获取某个元素的上一个子元素
 * @param {Object} ele
 * @return: Object
 */
function getPreviousElement(ele) {
    if(ele.previousElementSibling) {
        return ele.previousElementSibling;
    } else {
        var previousEle = ele.previousSibling;      // 兼容IE
        while(previousEle !== null && previousEle.nodeType !== 1) {
            previousEle = previousEle.previousSibling;
        }
        return previousEle;
    }
}
/**
 * @获取某个元素的下一个子元素
 * @param {Object} ele
 * @return: Object
 */
function getNextElement(ele) {
    if(ele.nextElementSibling) {
        return ele.nextElementSibling;
    } else {
        var nextEle = ele.nextSibling;      // 兼容IE
        while(nextEle !== null && nextEle.nodeType !== 1) {
            nextEle = nextEle.previousSibling;
        }
        return nextEle;
    }
}
/**
 * @绑定事件兼容
 * @param {Object} ele
 * @param {String} type
 * @param {Function} fn
 * @return: function
 */
function addEvent(ele,type,fn) {
    if(ele.addEventListener) {
        ele.addEventListener(type,fn,false);
    } else if(ele.attachEvent) {
        ele.attachEvent("on"+type,fn);
    } else {
        ele["on"+type] = fn;
    }
}
/**
 * @解除事件绑定兼容 
 * @param {Object} ele
 * @param {String} type
 * @param {Function} fnName 命名函数
 */
function removeEvent(ele,type,fnName) {
    if(ele.removeEventListener) {
        ele.removeEventListener(type,fnName,false);
    } else if(ele.detachEvent) {
        ele.detachEvent("on"+type,fnName);
    } else {
        ele["on"+type] = null;
    }
}

/**
 * @匀速动画1 利用flag标记判断当前位置是否小于目标值，
 *          小于标记就为true并且加步长，否则当前位置就减去步长。 
 * @param {Object}ele 
 * @param {Number}target 
 * @return: Function
 */
function animation(ele,target){
    // 先清除定时器，防止定时器累加
    clearInterval(ele.timeID);
    // 开始定时器
    ele.timeID = setInterval(function() {
        // 获取当前元素左偏移值
        var current = ele.offsetLeft;
        // flag标记判断当前位置是否小于目标值
        var flag = current < target ? flag = true : flag = false;
        // 小于目标值就加上步长，否则减去步长
        current = flag == true ? current + 51 : current - 51;
        // 测试
        console.log(current);
        // 赋值移动元素
        ele.style.left = current +"px";
        // 判断清除定时器并让元素复位到目标值
        if(flag == true ? current >= target : current <= target) {
            clearInterval(ele.timeID);
            // 元素复位
            ele.style.left = target +"px";
        }
    },50);
}
/**
 * @匀速动画2 判断目标值减去当前位置是否大于步长，大于就移动步长的距离，
              否则就清除定时器，然后让元素复位到目标元素，如果从800移动到400，
              那么目标值 - 当前值肯定是负数，如-100 肯定 < -10,所以判断时都需取绝对值
 * @param {Object}ele 
 * @param {Number}target 
 * @return: Function
 */
function animate(ele,target) {
    // 先清除定时器，防止定时器累加
    clearInterval(ele.timeID);
    // 开始定时器
    ele.timeID = setInterval(function() {
        // 获取当前元素左偏移值
        var current = ele.offsetLeft;
        // 每次移动步长
        var step = 31;
        // 判断移动方向
        step = current < target ? step : -step;
        // 当前偏移量累加
        current += step;
        // 判断目标值减去当前位置是否大于步长，大于就移动步长的距离，
        // 否则就清除定时器，然后让元素复位到目标元素
        if(Math.abs(target - current) > Math.abs(step)) {
            ele.style.left = current + "px";
        } else {
            clearInterval(ele.timeID);
            ele.style.left = target + "px";
        }
    },30);
}
/**
 * @缓动动画 
 * @param {Object} ele
 * @param {Number} target
 * @param {Function} callback
 * @return:function
 */
function slowAction(ele,target,callback) {
    // 先清除定时器，防止定时器累加
    clearInterval(ele.timeID);
    // 开始定时器
    ele.timeID = setInterval(function(){
        var current = ele.offsetLeft;
        // 缓动系数（步长）
        var step = (target - ele.offsetLeft) / 10;
        // 取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        // 赋值移动
        current += step;
        ele.style.left = current + "px";
        // 判断到达目标值清除定时器
        if(current == target) {
            clearInterval(ele.timeID);
            callback && callback();
        } 
        // 测试代码
        console.log("当前位置："+current+"目标位置："+target+"移动步数:"+step);
        
    },20);
}
/**
 * @带px属性值的缓动动画
 * @param {Object} ele：元素
 * @param {String} attr:获取到的真实css属性值 
 * @param {Number} target:目标值
 * @param {Function} callback:回调函数 
 * @return:fn
 */
function anySlowAction(ele,attr,target,callback) {
    // 先清除定时器，防止定时器累加
    clearInterval(ele.timeID);
    // 开始定时器
    ele.timeID = setInterval(function(){
        var current = parseInt(getStyle(ele,attr));
        // 缓动系数（步长）
        var step = (target - current) / 10;
        // 取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        // 赋值移动
        current += step;
        ele.style[attr] = current + "px";
        // 判断到达目标值清除定时器
        if(current == target) {
            clearInterval(ele.timeID);
            callback && callback();
        } 
        // 测试代码
        console.log("当前位置："+current+"目标位置："+target+"移动步数:"+step);
    },20);
}  

/**
 * @任意属性的多组缓动动画  
 * @param {Object} ele:动画的元素
 * @param {Object} json:对象--->所有的属性和属性值
 * @param {Function} callback:回调函数
 * @return: 
 */
function buffers(ele,json,callback) {
    // 先清除定时器，防止定时器累加
   clearInterval(ele.timeID);
   // 开启定时器
   ele.timeID = setInterval(function(){
       var flag = true; // 默认 假设所有属性值都到达了目标值
       // 遍历对象拿到属性和属性值
       for(var attr in json) {
           // 透明度 || 背景色
           if(attr == "opacity" || attr == "backgroundColor") {
               // 获取元素当前的透明度，放大一百倍
               var current = getStyle(ele,attr)*100;
               // 缓动系数（目标值放大一百倍）
               var target = json[attr] * 100;
               var step = (target - current) / 10;
               // 判断移动方向
               step = step > 0 ? Math.ceil(step) : Math.floor(step);
               // 累加步长开始动画
               current += step;
               ele.style[attr] = current / 100;
           } else if(attr == "zIndex") {      // 层级
               ele.style[attr] = json[key];
           } else {    //普通属性
               // 对象的每个属性对应的属性值赋值给目标值
               var target = json[attr];
               // 获取元素属性值过滤px单位
               var current = parseInt(getStyle(ele,attr));
               // 缓动系数
               var step = (target - current) / 10;
               // 判断移动方向
               step = step > 0 ? Math.ceil(step) : Math.floor(step);
               // 累加步长开始动画
               current += step;
               ele.style[attr] = current + "px";
           }
           // 如果有属性值未到达目标值，标志falg就为false
           if(current != target) {
               flag = false;
           }
       }
       // 判断元素的属性值是否都到达目标，到达清除定时器
       if(flag) {
           clearInterval(ele.timeID);
           // 回调函数（把函数当参数使用）
           callback && callback();
       }
       // 测试代码
       console.log("当前位置："+current+"目标位置："+target+"移动步数:"+step);
   },30);
} 
/**
 * @获取任意一个标签真实的css属性值 
 * @param {Object}ele 
 * @param {String}attr 
 * @return: string
 */
function getStyle(ele,attr){
    return window.getComputedStyle ? window.getComputedStyle(ele,null)[attr] : ele.currentStyle[attr] || 0;
}
/**
 * @获取页面被卷去的高度和宽度 
 * @return: Object
 */
function getScroll() {
    return {
        top : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
        left : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
    }
}