02jquery获取各种鼠标位置

jquery获取各种鼠标位置

获取当前鼠标相对img元素的坐标

   $('img').mousemove(function(e) {

        var positionX=e.pageX-$(this).offset().left; //获取当前鼠标相对img的X坐标

        var positionY=e.pageY-$(this).offset().top; //获取当前鼠标相对img的Y坐标

        console.log(positionX+'    '+positionY);

    })

       

获取当前鼠标相对浏览器的原点的坐标        

    $('img').mousemove(function(e) {     

        var xx = e.originalEvent.x || e.originalEvent.layerX || 0;     

        var yy = e.originalEvent.y || e.originalEvent.layerY || 0;           

        console.log(xx+'    '+yy);            

    })

           

获取当前鼠标相对html页面的原点的坐标            

    $('img').mousemove(function(e) {

        var pageX=e.pageX;          

        var pageY=e.pageY;         

        console.log(pageX+'    '+pageY);          

    })

                                                            

1，获取对象

var obj = $("#image");                  

2，获取对象元素的位置(offset()方法)

var offset = obj.offset();

获取对象元素的位置，分别是元素的top和left，调用方法是：offset.left和offset.top，可知当前对象的左部和顶部位置。  

3，获取对象元素的宽度(width()方法)

var right = offset.left+obj.width();

实例中是获取对象的右下角位置，创建新窗口的左部位置。

4，获取对象元素的高度(height()方法)

   var down = offset.top+obj.height();

实例中是获取对象的右下角位置，创建新窗口的顶部位置。                                    

5.获取对象相对于父元素的位置(position()方法)                           

  var x = obj.position().top;                                          

  var y = obj.position().left;

 

<script type="text/javascript">

$(document).ready(function(){

          alert($(window).height()); //浏览器当前窗口可视区域高度

          alert($(document).height()); //浏览器当前窗口文档的高度

          alert($(document.body).height());//浏览器当前窗口文档body的高度

          alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

          alert($(window).width()); //浏览器当前窗口可视区域宽度

          alert($(document).width());//浏览器当前窗口文档对象宽度

          alert($(document.body).width());//浏览器当前窗口文档body的高度

          alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

})

</script>