图片随着着鼠标移动（鼠标移动事件、获取横纵坐标）

一、文档中的鼠标移动事件------onmousemove

   <script>
        document.onmousemove=function(){
            console.log(arguments.length);
            console.log(arguments[0]);
            //有一个参数e,是一个对象,是事件参数对象
        }
    </script>

二、clientX和clientY获取横纵坐标----案例图片随着鼠标移动

    <img src="1.png" alt="" id="im" style="position: absolute;left: 0;top: 0;">
    <script>
        document.onmousemove=function(e){
            //谷歌和火狐中有这个对象e
            //IE8中没有这个是对象e,而是用window.event
            e=window.event||e;
            document.getElementById("im").style.left=e.clientX+"px";
            document.getElementById("im").style.top=e.clientY+"px";
        }
    </script>

三、pageX和pageY获取横纵坐标-----案例图片随着鼠标移动

    <img src="1.png" alt="" id="im" style="position: absolute;left: 0;top: 0;">
    <script>
        document.onmousemove=function(e){
            //如果有滚动条的时候,拉动滚动条,会出现bug
            //解决办法是用pageX和pageY代替
            //但是这两个属性火狐和谷歌可以用,IE9中不支持
            e=window.event||e;
            document.getElementById("im").style.left=e.pageX+"px";
            document.getElementById("im").style.top=e.pageY+"px";
        }
    </script>

四、兼容性写法（封装对象）

<!-- 封装关于获取横纵坐标的兼容性代码,并且把代码放在一个对象中 -->
    <script>
    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();
        }
    }
    </script>

 

转载于:https://www.cnblogs.com/EricZLin/p/9011836.html