获取页面某一元素的绝对X,Y坐标,可以用offset()方法:

var X = $('#DivID').offset().top;

var Y = $('#DivID').offset().left;

获取相对(父元素)位置:

var X = $('#DivID').position().top;

var Y = $('#DivID').position().left;

让Div随滚动条移动:

<div id="oLayer" style="position: absolute; left: 0; top:80px; z-index: 2; background: a9c9ef; margin-left:6px;
width: 140px; height: 70px"> </div> jQuery代码: $(window).scroll(function() {
var init_pos = $('#oLayer').offset().top;
$('#oLayer').css("top", $(window).scrollTop()+80)
});
$(document).bind('mousemove',function(e){
var x = e.pageX;
var y = e.pageY;
});
获取浏览器显示区域(可视区域)的高度 :   
$(window).height();   
获取浏览器显示区域(可视区域)的宽度 :
$(window).width();   
获取页面的文档高度   
$(document).height();   
获取页面的文档宽度 :
$(document).width(); 
浏览器当前窗口文档body的高度:  
$(document.body).height();
浏览器当前窗口文档body的宽度: 
$(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)  
$(document).scrollTop();   
获取滚动条到左边的垂直宽度 :
$(document).scrollLeft(); 
获取或设置元素的宽度:
$(obj).width();
获取或设置元素的高度:
$(obj).height();
某个元素的上边界到body最顶部的距离:obj.offset().top;(在元素的包含元素不含滚动条的情况下)
某个元素的左边界到body最左边的距离:obj.offset().left;(在元素的包含元素不含滚动条的情况下)
返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top(在元素的包含元素含滚动条的情况下)
返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offset().left(在元素的包含元素含滚动条的情况下)
 
scrollTop(), scrollLeft()
设置或返回已经滚动到元素的左边界或上边界的像素数。简单地说,就是设置或者获取匹配元素相对滚动条上侧或者左侧的偏移。只有在元素有滚动条的时候,例如,元素的 CSS overflow 属性设置为 auto 的时候,这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义(这和浏览器有关),并且一起来制定滚动文档的位置。注意,这些属性并不会指定一个 <iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性

jquery获取元素坐标获取鼠标坐标的更多相关文章

  1. 通过ID获取元素 注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法。

    通过ID获取元素 学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人.那么在网页中,我们通过id ...

  2. js 获取元素坐标 和鼠标点击坐标

    js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); aler ...

  3. 详细解析 JavaScript 获取元素的坐标

    引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...

  4. 002--VS C++ 获取鼠标坐标并显示在窗口上

    //--------------------------------------------MyPaint() 函数------------------------------------------ ...

  5. jQuery如何获取元素及选择器的参考

    获取元素 Jquery当中几乎所有的功能.选择.事件处理等都用到了这个函数.通常用来获取元素,获取到的元素都会被存储为jQuery对象. 例如: 先设定一个id为aaa的div <body> ...

  6. iframe多层嵌套时,Jquery获取元素

    在项目中,尤其是后台管理项目,会使用到iframe嵌套的网页,说起iframe,真的是个让人头疼的东西,能避开是最好避开.不然要请随身备好氧气瓶哈(因为管理和调试过程中往往会被气缺氧!!!哈哈哈~~~ ...

  7. 自动化测试基础篇--Selenium获取元素属性

    摘自https://www.cnblogs.com/sanzangTst/p/8375938.html 通常在做断言之前,都要先获取界面上元素的属性,然后与期望结果对比. 一.获取页面title 二. ...

  8. UI自动化之特殊处理四(获取元素属性\爬取页面源码\常用断言)

    获取元素属性\爬取页面源码\常用断言,最终目的都是为了验证我们实际结果是否等于预期结果 目录 1.获取元素属性 2.爬取页面源码 3.常用断言 1.获取元素属性 获取title:driver.titl ...

  9. JavaScript通过ID获取元素坐标

    JavaScript通过ID获取元素坐标 function getElementPos(elementId) {    var ua = navigator.userAgent.toLowerCase ...

  10. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

随机推荐

  1. TypeScript基础知识

    一. TypeScript是js的超集,可以应用所有js语法 二. 特点: 1. 优点 a. 可以在编译阶段就发现大部分错误,这总比在运行时候出错好 b. 同一目录下不同文件中,使用统一命名,会有命名 ...

  2. 【例7-15 UVA-1603】Square Destroyer

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 先预处理出所有的正方形(长度为1,2...n的)所包含哪些边. 然后记录每个正方形的应有边长和实际边长(有些边被删掉了); 然后搜的 ...

  3. 1.IntelliJ IDEA搭建SpringBoot的小Demo

    转自:http://www.cnblogs.com/weizaibug/p/6657077.html 首先简单介绍下Spring Boot,来自度娘百科:Spring Boot是由Pivotal团队提 ...

  4. Oracle调用Java类开发的存储过程、函数的方法

    oracle调用java类的基本步骤 1. 编写java代码,后续可以直接使用java代码,class文件或者jar包 2. 将写好的java代码导入到oracle数据库中,有两种方法:一种是使用lo ...

  5. v-for实现循环嵌套

    <!DOCTYPE html> <html lang="en"> <head> <title></title> < ...

  6. 修改shm,oracle11g需要扩大共享内存

    作者:david_zhang@sh [转载时请以超链接形式标明文章] 链接:http://www.cnblogs.com/david-zhang-index/archive/2012/04/26/24 ...

  7. 15、python学习手册之:列表和字典

    1.列表属于可变序列,支持在原处的修改 2.在标准python解锁器内部,列表就是C数组而不是链接结构 3.内置函数map对序列中的各项应用一个函数并把结果收集到一个新的列表中 eg:list(map ...

  8. express,中间件(body-parser),req.body获取不到参数(含postman发请求的方法)

    问题描述: 最近在做毕设,express 里边的中间件(body-parser)失效,req.body获取不到任何值,req.query能获取到值.一开始加body-parser中间件是有用的,直到昨 ...

  9. Scala在挖财的应用实践--转载

    原文地址:http://www.infoq.com/cn/articles/scala-architecture-wacai 编者按:本文是根据ArchSummit大会上挖财资深架构师王宏江的演讲&l ...

  10. 11.1 Android显示系统框架_framebuffer原理及改进

    1. Android显示系统框架Android Graphic UI with GPU Hardware Accelerationhttps://community.nxp.com/docs/DOC- ...