client系列

1.client(可视区)系列

1. clientWidth：可视区域的宽(没有边框)，边框内部的宽度
2. clientHeight：可视区域的高(没有边框)，边框内部的高度
3. clientLeft：左边框的宽度
4. clientTop：上边框的宽度

2.图片跟随鼠标移动案例

注意点：图片要脱离文档流（absolute）

因为IE8的浏览器中针对事件参数对象使用的是window.event,事件处理函数中是没有e这个参数的,使用window.event来代替e：

但上述的兼容代码，在浏览器的滚动条移动时，页面(document)向上/向左移动了一段，此时鼠标的纵坐标/横坐标已经不是可视区的纵坐标/横坐标了，所以这时图片并没有紧跟鼠标。这时需要的其实是向上/向左卷曲出去的距离+可视区的纵坐标/横坐标（即此时鼠标真正的纵坐标/横坐标）

上述代码可以解决上面的问题，但只兼容谷歌和火狐，要解决IE8的则需要向上/向左卷曲出去的距离(封装的getScroll)+可视区的纵坐标/横坐标(clientX和clientY)

 //最终版--兼容任何浏览器
    //将代码封装在一个对象中
    var evt = {
        //window.event和事件参数对象e的兼容
        getEvent: function (evt) {
            return evt || window.event;
        },

        //可视区横坐标的兼容代码
        getClientX: function (evt) {
            return this.getEvent(evt).clientX;
        },
        //可视区纵坐标的兼容代码
        getClientY: function (evt) {
            return this.getEvent(evt).clientY;
        },
        //页面向左卷曲出去的距离
        getScrollLeft: function () {
            return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;
        },
        //页面向左卷曲出去的距离
        getScrollTop: function () {
            return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
        },
        //相对于页面的横坐标(pageX或clientX+scrollLeft)
        getPageX: function (evt) {
            return this.getEvent(evt).pageX ? this.getEvent(evt).pageX : this.getEvent(evt).clientX + this.getScrollLeft();
        },
        //相对于页面的横坐标(pageY或clientY+scrollTop)
        getPageY: function (evt) {
            return this.getEvent(evt).pageY ? this.getEvent(evt).pageY : this.getEvent(evt).clientY + this.getScrollTop();
        }
    };
    document.onmousemove = function (e) {
        my$("im").style.left = evt.getPageX(e) + "px";
        my$("im").style.top = evt.getPageY(e) + "px";
    };