jquery 擷取滑鼠和元素的座標點

標籤：javascrip   fun   margin   style   pre   document   mouse   offset   jquery   

擷取當前滑鼠相對img元素的座標

$(‘div‘).mousemove(function(e) {       varpositionX=e.pageX-$(this).offset().left; //擷取當前滑鼠相對div的X座標       varpositionY=e.pageY-$(this).offset().top; //擷取當前滑鼠相對div的Y座標       console.log(positionX+‘   ‘+positionY);   })

擷取當前滑鼠相對瀏覽器的原點的座標

$(‘div‘).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頁面的原點的座標

$(‘div‘).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;

<scripttype="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> 

 

jquery 擷取滑鼠和元素的座標點