height / clientHeight / offsetHe

height：指元素内容的高度 ，jQuery中的height()方法返回的就是这个高度。
clientHeight：内容高度+padding高度 ，jQuery中的innerHeight()方法返回的就是这个高度。
offsetHeight：内容高度+padding高度+边框宽度 ，jQuery中的outerHeight()方法返回的就是这个高度。
offsetLeft：如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。
如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离

scrollTop :元素里面内容滚出的距离
  //onscroll滚动事件
    demo.onscroll = function () {
        console.log(demo.scrollTop);
    };
封装方法页面滚出的距离
 function scroll() {
        return {
            top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
            left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
        };
    }
  window.onscroll = function () {
        //console.log(scroll().top);//输出页面被卷去的高度
        console.log(scroll().top);
    };

封装方法页面可视区域的大小
 function client() {
        return {
            width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
            height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
        };
    }
  //窗体大小发生改变的事件 onresize
    window.onresize = function () {
        var clientWidth = client().width;
        console.log(clientWidth);
    };

封装缓动动画
   //让 任意对象 的 任意属性 变为任意的目标值
    function animate(obj, json, fn) {//json attr, target
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var flag = true;
            for (var k in json) {//json 属性名:属性值 k:json[k]
                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);
    }

    function getStyle(obj, attr) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(obj, null)[attr];
        } else {
            return obj.currentStyle[attr];
        }
    }

封装匀速动画