JS基础-特效篇-封装MyTool

1.把之前写的动画函数封装进去！
新的：json.hasOwnProperty(key)
2.JS函数

var myTool = {
    $: function (id) {
        return typeof id === "string" ? document.getElementById(id) : null;
    },
    scroll: function () {
        if (window.pageYOffset !== null) { //最新的浏览器
            return {
                //里面相当于字面量对象或JSON对象，是有区别的
                "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
        }
    },
    show: function (ele) {
        ele.style.display = 'block';
    },
    hide: function (ele) {
        ele.style.display = 'none';
    },
    client: function () {
        if (window.innerWidth !== null) { //最新的浏览器
            return {
                //里面相当于字面量对象或JSON对象，是有区别的
                "width": window.innerWidth,
                "height": window.innerHeight
            }
        } else if (document.compatMode === 'CSS1Compat') {  //W3C标准
            return {
                "width": document.documentElement.clientWidth,
                "height": document.documentElement.clientHeight
            }
        }
        return {
            "width": document.body.scrollWidth,
            "height": document.body.scrollHeight
        }
    },
    /*阻止冒泡*/
    stopBubble: function (eve) {
        if (eve && eve.stopPropagation) {
            eve.stopPropagation();
        } else {   //IE678
            eve.cancelBubble = true;
        }
    },
    //获取选中文本
    selectText: function () {
        if (window.getSelection) {
            return window.getSelection().toString();
        } else {
            return document.selection.createRange().text;
        }
    },
    //获取点击对象
    targetId: function (ele) {
        return ele.target ? ele.target.id : ele.srcElement.id;
    },
    //获取改变颜色值
    changeCssStyle: function (eleObj, attr, value) {
        eleObj.style[attr] = value;
    },
    //获取CSS样式值
    getStyleAttr: function (obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return window.getComputedStyle(obj, null)[attr];
        }
    },
    //缓动动画（多组+透明度）
    buffer: function (eleObj, json, fn) {
        clearInterval(eleObj.timer);
        var speed = 0, begin = 0, target = 0, flag = false;
        eleObj.timer = setInterval(function () {
            flag = true;
            for (var key in json) {
                if (json.hasOwnProperty(key)) {
                    if (key === 'opacity') {
                        begin = parseInt(myTool.getStyleAttr(eleObj, key) * 100) || 100;
                        target = parseInt(json[key] * 100);
                    } else {
                        begin = parseInt(myTool.getStyleAttr(eleObj, key)) || 0;
                        //这个是0！！前面的都写错了！！
                        target = parseInt(json[key]);
                    }
                    speed = (target - begin) * 0.2;
                    speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
                    if (key === 'opacity') {
                        eleObj.style.opacity = (begin + speed) / 100;
                    } else {
                        eleObj.style[key] = begin + speed + 'px';
                    }
                    if (begin !== target) {
                        flag = false;
                    }
                }
            }
            if (flag) {
                clearInterval(eleObj.timer);
                //开启另外的动画
                // if(fn){
                //     fn();
                // }
                fn && fn();
            }
        }, 20)
    }
};