自己整理出来的一些用到的方法的封装,欢迎指教

/**
 * Created by Administrator on 2016/11/21 0021.
 */

/**
 * 窗口加载
 * @param fn
 */
function addLoadEvent(fn) {
    var oldOnLoad = window.onload;
    //检查现在的window.onload是否绑定了事件
    //console.log(oldOnLoad);
    if (typeof oldOnLoad === "function") {//说明之前绑定了事件
        window.onload = function () {
            oldOnLoad();//之前的要执行
            fn();//传入的新的要绑定的将来也要执行
        };
    } else {
        window.onload = fn;
        /*window.onload = function () {
         fn();
         };*/
    }
}
/**
 * 获取内部文本innerText 的兼容性
 * @param element
 * @returns {*}
 */
function getInnerText(element) {// 特殊情况 浏览器有innerText 但是当前元素的innerText 里面是空字符串""转换成boolean值是false;
    if (typeof element.innerText === "string") {
        return element.innerText; // ie 类 旧版
    } else {
        return element.textContent; //FF 旧版
    }
}
/**
 *设置内部文本innerText 的兼容性
 * @param element
 * @param content
 */
function setInnerText(element, content) {
    if (typeof element.innerText === "string") {
        element.innerText = content;
    } else {
        element.textContent = content;
    }
}
/**
 * 封装 获取下一个兄弟元素 的兼容方法
 * @param element
 * @returns {*}
 */
function getNextElement(element) {
    if (element.nextElementSibling) {//能找到
        return element.nextElementSibling;
    } else {
        var next = element.nextSibling;//下一个兄弟节点
        while (next && 1 !== next.nodeType) {//有 并且 不是我们要的
            next = next.nextSibling;
        }
        return next;
    }
}
/**
 * 获取上一个兄弟元素的兼容写法
 * @param element
 * @returns {*}
 */
function getPreviousElement(element) {
    if (element.previousElementSibling) {
        return element.previousElementSibling;
    } else {
        var perv = element.previousSibling;//上一个兄弟节点
        while (perv && 1 !== perv.nodeType) {//1有 2不是我们想要的
            perv = perv.previousSibling;
        }
        return perv;
    }
}
/**
 * 通过类名获取页面元素的兼容性写法
 * @param element:获取元素的对象
 * @param className:类名
 * @returns {返回获得的页面元素}
 */
function getElementsByClassName(element, className) {
    if (element.getElementsByClassName) {
        return element.getElementsByClassName(className);
    } else {
        var filterArr = [];//符合类名条件的容器
        var elements = element.getElementsByTagName("*");//获得当前元素的所有子元素
        for (var i = 0; i < elements.length; i++) {//循环变量每一个元素
            //""
            var cName = elements[i].className;//获得元素的className
            var arr = cName.split(" ");//根据" "分割类名,得到一个数组
            for (var j = 0; j < arr.length; j++) {
                if (className === arr[j]) {//将拥有这个类名的元素添加到数组中
                    filterArr.push(elements[i]);
                    break;
                }
            }
        }
        return filterArr;
    }
}
/**
 *获得页面被卷去部分的封装
 *.top就可以获取被卷去的头部的高度
 *.left就可以获取被卷去的左侧的宽度
 * @returns {{top: (Number|number), left: (Number|number)}}
 */
function scroll() {
    return {
        top: window.pageYOffset
        || document.documentElement.scrollTop
        || document.body.scrollTop
        || 0,
        left: window.pageXOffset
        || document.documentElement.scrollLeft
        || document.body.scrollLeft
        || 0
    };
}
/**
 * 网页可视区宽 封装
 * @returns {Number|number}
 */
function client() {
    return {
         window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
    };
}
/**
 * 缓动动画
 * @param obj 要运动的对象
 * @param json 对象,里面是obj的一些列属性:属性值(这些属性值相当于是目标值)
 * @param fn 在缓动动画结束之后,要执行的函数
 */
function animate(obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var flag = true;
        for (var k in json) {
            if (k === "opacity") {
                var leader = getStyle(obj, k) * 100;
                var target = json[k] * 100;
                var step = (target - leader) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                leader = leader + step;
                obj.style[k] = leader / 100;
            } else if (k === "zIndex") {
                obj.style.zIndex = json[k];
            } else {
                var leader = parseInt(getStyle(obj, k)) || 0;
                var target = json[k];
                var step = (target - leader) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                leader = leader + step;
                obj.style[k] = leader + "px";
            }
            if (leader != target) {
                flag = false;
            }
        }
        if (flag) {
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }
    }, 15);
}
/**
 *在页面上获得属性的方法的封装
 * @param obj 要在页面上获得属性的对象
 * @param attr 要在页面上获得的属性
 * @returns {*}
 */
function getStyle(obj, attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(obj, null)[attr];
    } else {
        return obj.currentStyle[attr];
    }
}
/**
 *匀速动画的封装
 * @param obj 要运动的对象
 * @param target 运动的目标值
 * @param stp 一步要运动是距离
 */
function cutton(obj, target, stp) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var leader = obj.offsetLeft;
        var step = stp;
        step = leader < target ? step : -step;
        if (Math.abs(target - leader) >= Math.abs(step)) {
            leader = leader + step;
            obj.style.left = leader + "px";
        } else {
            obj.style.left = target + "px";
            clearInterval(obj.timer);
        }
    }, 15)
}
/**
 * 头部缓动动画
 * @param obj
 * @param json
 * @param fn
 */
function animate1(obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var flag = true;
        for (var k in json) {
            if (k === "opacity") {
                var leader = getStyle(obj, k) * 100;
                var target = json[k] * 100;
                var step = (target - leader) / 20;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                leader = leader + step;
                obj.style[k] = leader / 100;
            } else if (k === "zIndex") {
                obj.style.zIndex = json[k];
            } else {
                var leader = parseInt(getStyle(obj, k)) || 0;
                var target = json[k];
                var step = (target - leader) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                leader = leader + step;
                obj.style[k] = leader + "px";
            }
            if (leader != target) {
                flag = false;
            }
        }
        if (flag) {
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }
    }, 15);
}
/**
 * 匀速动画的封装(左右移动)
 * @param obj  要运动的对象
 * @param target  运动的目标值
 * @param stp   一步要运动的距离
 */
function cuttonH(obj, target, stp) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var step = stp;
        step = obj.offsetTop < target ? step : -step;
        if (Math.abs(target - obj.offsetTop) >= Math.abs(step)) {
            obj.style.top = obj.offsetTop + step + "px";
        } else {
            obj.style.top = target + "px";
            clearInterval(obj.timer);
        }
    }, 15)
}
原文地址:https://www.cnblogs.com/199316xu/p/6426237.html