The picture moves with the mouse case

First, the mouse movement event in the document ------ onmousemove

   <script>
        document.onmousemove=function(){
            console.log(arguments.length);
            console.log(arguments[ 0 ]);
             // There is a parameter e, which is an object, which is an event parameter object 
        }
     </ script >

2. ClientX and clientY get the horizontal and vertical coordinates----the case picture moves with the mouse

    < img src ="1.png" alt ="" id ="im" style ="position: absolute;left: 0;top: 0;" > 
    < script > 
        document.onmousemove = function (e){
             // Google And there is this object e in Firefox 
            // IE8 does not have this object e, but use window.event 
            e = window.event || e;
            document.getElementById("im").style.left=e.clientX+"px";
            document.getElementById("im").style.top=e.clientY+"px";
        }
    </script>

3. pageX and pageY get the horizontal and vertical coordinates ----- the case picture moves with the mouse

    < img src ="1.png" alt ="" id ="im" style ="position: absolute;left: 0;top: 0;" > 
    < script > 
        document.onmousemove = function (e){
             // if When there is a scroll bar, if you pull the scroll bar, a bug will appear 
            // The solution is to use pageX and pageY instead.//But 
            these two properties can be used by Firefox and Google. IE9 does not support 
            e = window.event || e;
            document.getElementById("im").style.left=e.pageX+"px";
            document.getElementById("im").style.top=e.pageY+"px";
        }
    </script>

Fourth, compatibility writing (package object)

<!-- Encapsulate the compatibility code for obtaining the horizontal and vertical coordinates, and put the code in an object --> 
    < script > 
    var evt = {
         // compatibility of window.event and event parameter e 
        getEvent: function (evt) {
             return window.event || evt;
        },
        // Compatible code for the abscissa of the visible area 
        getClientX: function (evt){
             return  this .getEvent(evt).clientX;
        },
        // Compatible code for the ordinate of the visible area 
        getClientY: function (evt){
             return  this .getEvent(evt).clientY;
        },
        // The abscissa of the page curling to the left 
        getScrollLeft: function (){
             return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0 ;
        },
        // The abscissa where the page curls up 
        getScrollTop: function (){
             return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0 ;
        },
        // Abscissa (pageX or clientX+scrollLeft) relative to the page (screen) 
        getPageX: function (evt){
             return  this .getEvent(evt).pageX ? this .getEvent(evt).pageX: this .getClientX(evt ) + this.getScrollLeft ();
        },
        // The ordinate (pageY or clientY+scrollTop) relative to the page (screen) 
        getPageY: function (evt){
             return  this .getEvent(evt).pageY ? this .getEvent(evt).pageY: this .getClientY(evt ) + this.getScrollTop ();
        }
    }
    </script>