js——封装函数

  /**
     * 获取滚动的头部距离和左边距离
     * 用法scroll().top/scroll().left
     * @returns {{top: number, left: number}}
     */
    function scroll() {
        if (window.pageXOffset !== null) {//ie9+和最新浏览器
            return {
                top: window.pageYOffset,
                left: window.pageXOffset
            }
        } else if (document.compatMode === 'CSS1Compat') {//w3c严格模式
            return {
                top: document.documentElement.scrollTop,
                left: document.documentElement.scrollLeft
            }
        }
        //怪异模式
        return {
            top: document.body.scrollTop,
            left: document.body.scrollLeft
        }
    }


    /**
     * 获取屏幕宽高
     * @returns {{width: number, height: number}}
     */
    function client() {
        if (window.innerWidth) {//ie9和最新浏览器
            return {
                width: window.innerWidth,
                height: window.innerHeight
            }
        } else if (window.compatMode === 'CSS1Compat') {//w3c严格模式
            return {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        }

        return {//怪异模式
            width: document.body.clientWidth,
            height: document.body.clientHeight
        }
    }

    console.log(client().height);


    //阻止冒泡
    if (event && event.stopPropagation) {//w3c
        event.stopPropagation();
    } else {//ie678
        event.cancelBubble = true;
    }


    //显示和隐藏
    function show(obj) {
        return obj.style.display = 'block';
    }
    function hide(obj) {
        return obj.style.display = '';
    }


    //获取选中的内容
    var selectText;
    if (window.getSelection) {
        selectText = window.getSelection().toString();
    } else {
        selectText = document.selection.createRange().text;
    }


    //防止拖动选中
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();


    //获取ID
    function $(id) {
        return typeof id === 'string' ? document.getElementById(id) : null;
    }


    /**
     * 匀速动画
     * @param ele 元素
     * @param target 目标值
     * @param speed 步长
     */
    function constant(ele, target, speed) {
        //clear
        clearInterval(ele.timer);
        //判断方向
        var dir = ele.offsetLeft <= target ? speed : -speed;
        //set
        ele.timer = setInterval(function () {
            ele.style.left = ele.offsetLeft + dir + 'px';
            //矫正speed引起误差和清除
            if (Math.abs(target - ele.offsetLeft) <= Math.abs(dir)) {
                clearInterval(ele.timer);
                ele.style.left = target + 'px';
            }
        }, 20)
    }


    /**
     * 遍历arr（数组或对象）输出在控制台
     * @param arr
     */
    function traversal(arr) {
        if(arr instanceof Object){
            for (var key in arr){
                console.log(key);
                console.log(arr[key]);
            }
        }else if(arr instanceof Array){
            arr.forEach(function (item,val) {
                console.log(item,val);
            })
        }
    }



    /**
     * 获取css属性值
     * @param obj
     * @param attr (string)
     * @returns {*}
     */
    function getCssValue(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        }
        else {
            return window.getComputedStyle(obj, null)[attr];
        }
    }



    /**
     * 封装 缓动动画（要结合getCssValue一起使用）
     * @param obj
     * @param attr (string)
     * @param target
     */
    function action(obj, attr, target) {
        //clear
        clearInterval(obj.timer);
        //set
        var speed = 0,begin=0;
        obj.timer = setInterval(function () {
            begin = parseInt(getCssValue(obj, attr));
            //speed
            speed = (target - begin) * 0.2;
            //check
            speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
            //act
            obj.style[attr] = begin + speed + 'px';
            obj.innerText = begin;
            //clear
            if (begin === target) {
                clearInterval(obj.timer);
            }
        }, 50)
    }




    /**
     * 封装 缓动动画（JSON遍历）（要结合getCssValue一起使用）
     * @param obj
     * @param json
     */
    function action2(obj, json) {
        //clear
        clearInterval(obj.timer);
        //set
        var speed = 0,begin=0;
        obj.timer = setInterval(function () {
            //check
            var flag=true;
            for(var k in json){
                begin = parseInt(getCssValue(obj, k));
                //speed
                speed = (json[k] - begin) * 0.2;
                //check
                speed = (json[k] > begin) ? Math.ceil(speed) : Math.floor(speed);
                //act
                obj.style[k] = begin + speed + 'px';
                obj.innerText = begin;
                //clear
                if(json[k] !== begin ) {
                    flag=false
                }
            }
            if(flag){
                clearInterval(obj.timer);
            }
        }, 50)
    }


    /**
     * 封装 缓动动画（回调+透明度变化）（要结合getCssValue一起使用）
     * @param obj
     * @param json
     * @param fn
     */
    function action3(obj, json, fn) {
        //clear
        clearInterval(obj.timer);
        //set
        var speed = 0, begin = 0, target = 0;
        obj.timer = setInterval(function () {
            //check
            var flag = true;
            for (var k in json) {
                if ('opacity' === k) {
                    begin = Math.round(getCssValue(obj, k) * 100);
                    target = parseInt(json[k] * 100);
                } else {
                    begin = parseInt(getCssValue(obj, k));
                    target = parseInt(json[k]);
                }
                speed = (target - begin) * .2;
                //check
                speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);

                if ('opacity' === k) {
                    //w3c
                    obj.style.opacity = (begin + speed) / 100;
                    //ie opera
                    obj.style.filter = "alpha(opacity:" + (begin + speed) + ")";
                } else {
                    //act
                    obj.style[k] = begin + speed + 'px';
                }
                //clear
                if (target !== begin) {
                    flag = false
                }
            }
            if (flag) {
                clearInterval(obj.timer);
                //判断回调
                if (fn) {
                    fn();
                }
            }
        }, 50)
    }