div内鼠标坐标位置及绝对和相对坐标获取 JQuery 获得div绝对,相对位置的坐标方法

JQuery 获得div绝对,相对位置的坐标方法

 
           获取页面某一元素的绝对X,Y坐标 
          
 
           var  
           X = $( 
           '#DivID' 
           ).offset().top; 
          
 
           var  
           Y = $( 
           '#DivID' 
           ).offset().left; 
          
 
           获取相对(父元素)位置: 
          
 
           var  
           X = $( 
           '#DivID' 
           ).position().top; 
          
 
           var  
           Y = $( 
           '#DivID' 
           ).position().left; 
          

一个div里面定位鼠标的相对坐标

一般我们在页面定位鼠标的坐标位置时，指的是屏幕的坐标。

$("#canvas").mousedown(function(e){

mouseX1 = e.pageX - $("#canvas").offset().left;

mouseY1 = e.pageY - $("#canvas").offset().top;

}）;

其中e.pageX和e.pageY是鼠标相对于整个屏幕的坐标。

offset()是jquery里面的一个方法，主要是定位某一个容器（div）距离屏幕或者父元素的相对偏移量。如果用

e.pageX - $("#canvas").offset().left;//得出鼠标在容器内的坐标X，以容器的左上角为坐标原点

e.pageY - $("#canvas").offset().top;//得出鼠标在容器内的坐标Y，以容器的左上角为坐标原点

这样就可以解决在元素里面进行canvas的涂鸦的时候，画笔痕迹漂移的问题了。很管用！

 
         获取页面某一元素的绝对X,Y坐标 
        
 
         var  
         X = $( 
         '#DivID' 
         ).offset().top; 
        
 
         var  
         Y = $( 
         '#DivID' 
         ).offset().left; 
        
 
         获取相对(父元素)位置: 
        
 
         var  
         X = $( 
         '#DivID' 
         ).position().top; 
        
 
         var  
         Y = $( 
         '#DivID' 
         ).position().left; 
        