jquery 获取鼠标和元素的坐标点

本文介绍了使用jQuery来获取鼠标在不同参照系下的位置坐标,包括相对于图片元素、浏览器原点及HTML页面原点的坐标,并展示了如何获取元素的位置、宽度和高度等属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

获取当前鼠标相对img元素的坐标
  $('img').mousemove(function(e) {
       varpositionX=e.pageX-$(this).offset().left; //获取当前鼠标相对img的X坐标
       varpositionY=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;
<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> 

                              
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值