js-图片跟随鼠标移动

事件的兼容性代码

var evt = {
                //window.event和事件参数对象e的兼容
                getEvent:function(evt){
                    
                    return window.event || evt; 
                },
                //可视区域的横坐标的兼容代码
                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.getClientX(evt)+this.getScrollLeft();
                },
                //相对于页面的纵坐标(pageY或者是clientY+scrollTop)
                getPageY:function(evt){
                    return this.getEvent(evt).pageY ? this.getEvent(evt).pageY : this.getClientY(evt)+this.getScrollTop();
                }

            };

使用:

document.onmousemove = function (e) {
                document.getElementById("tom").style.left = evt.getPageX(e) + "px";
                document.getElementById("tom").style.top = evt.getPageY(e) + "px";
            };