前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jquery 获取鼠标和元素的坐标点

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

作者头像
Yiiven
发布2022-12-15 11:57:46
2.4K0
发布2022-12-15 11:57:46
举报
文章被收录于专栏:怡文菌

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

代码语言:javascript
复制
$('div').mousemove(function(e) {  
     varpositionX=e.pageX-$(this).offset().left; //获取当前鼠标相对div的X坐标  
     varpositionY=e.pageY-$(this).offset().top; //获取当前鼠标相对div的Y坐标  
     console.log(positionX+'   '+positionY);  
 })

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

代码语言:javascript
复制
$('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页面的原点的坐标

代码语言:javascript
复制
$('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;

代码语言:javascript
复制
<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>

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:

原文出处:Yiiven https://cloud.tencent.com/developer/article/2193093

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-11-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档