使用js获取鼠标位置坐标

在前端效果的实现中，我们有时候需要获取到鼠标位置的信息，例如：需要在鼠标悬浮在一个图片上时显示文字说明并且文字位置随着鼠标的移动而移动，这时候我们就需要根据鼠标的位置来设置文字的位置了。

具体来说，获取鼠标位置信息的函数如下：

//获取鼠标的位置信息

function mousePosition(e){

     if(e.pageX || pageY){  //ff,chrome等浏览器

          //返回一个多值类型

          return{x:e.pageX ,y:e.pageY};

     }else{

           return{  //ie浏览器

                x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

                y:ev.clientY + document.body.scrollTop - document.body.clientTop

          };

     }  

}

这样，通过mousePosition函数，我们就可以方便的获取到鼠标当前的x,y坐标。

例如：设置鼠标悬浮显示的函数可以如下写：

<img ... onmousemove="mouseMove()" onmouseout="mouseOut()"/>

<div id="div-id" style="position:absolute;display:none;">

     随鼠标显示的内容

</div>

<script type="text/javascrip">

      function mouseMove(){

           var e=window.event;

           document.getElementById('div-id').style.left=mousePosition(e).x;

           document.getElementById('div-id').style.top=mousePosition(e).y;

           document.getElementById('div-id').style.display="inline";

      }

     function mouseOut(){

          document.getElementById('div-id').style.display="none";

     } 

</script>

这样我们就实现了div随着悬浮在图片上的鼠标的位置改变而动的效果了。