zoukankan      html  css  js  c++  java
  • 自己整理出来的一些用到的方法的封装,欢迎指教

    /**
     * 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)
    }
  • 相关阅读:
    Lua 学习之基础篇七<Lua Module,Package介绍>
    Lua 学习之基础篇六<Lua IO 库>
    Lua 学习之基础篇五<Lua OS 库>
    Lua 学习之基础篇四<Lua table(表)>
    Lua 学习之基础篇三<Lua 字符串操作>
    时空穿梭
    【集训队作业】line
    动态几何问题
    博弈论与概率统计
    wombats
  • 原文地址:https://www.cnblogs.com/199316xu/p/6426237.html
Copyright © 2011-2022 走看看