jquery 獲取鼠標和元素的坐標點


獲取當前鼠標相對img元素的坐標
[javascript]  view plain  copy
 
  1. $('img').mousemove(function(e) {  
  2.      varpositionX=e.pageX-$(this).offset().left; //獲取當前鼠標相對img的X坐標  
  3.      varpositionY=e.pageY-$(this).offset().top; //獲取當前鼠標相對img的Y坐標  
  4.      console.log(positionX+'   '+positionY);  
  5.  })  
獲取當前鼠標相對瀏覽器的原點的坐標      
[javascript]  view plain  copy
 
  1. $('img').mousemove(function(e) {      
  2.     var xx = e.originalEvent.x ||e.originalEvent.layerX || 0;      
  3.     var yy = e.originalEvent.y ||e.originalEvent.layerY || 0;           
  4.     console.log(xx+'   '+yy);            
  5. })  
獲取當前鼠標相對html頁面的原點的坐標         
[javascript]  view plain  copy
 
  1. $('img').mousemove(function(e) {  
  2.     var pageX=e.pageX;          
  3.     var pageY=e.pageY;         
  4.     console.log(pageX+'   '+pageY);          
  5. })  

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;
[javascript]  view plain  copy
 
  1. <scripttype="text/javascript">  
  2. $(document).ready(function(){  
  3.          alert($(window).height());//瀏覽器當前窗口可視區域高度  
  4.         alert($(document).height());//瀏覽器當前窗口文檔的高度  
  5.         alert($(document.body).height());//瀏覽器當前窗口文檔body的高度  
  6.         alert($(document.body).outerHeight(true));//瀏覽器當前窗口文檔body的總高度包括border padding margin  
  7.         alert($(window).width());//瀏覽器當前窗口可視區域寬度  
  8.         alert($(document).width());//瀏覽器當前窗口文檔對象寬度  
  9.         alert($(document.body).width());//瀏覽器當前窗口文檔body的高度  
  10.         alert($(document.body).outerWidth(true));//瀏覽器當前窗口文檔body的總寬度包括border padding margin  
  11. })  
  12. </script>   


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM