图片随着着鼠标移动(鼠标移动事件、获取横纵坐标)
一、文档中的鼠标移动事件------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>
【转载文章务必保留出处和署名,谢谢!】