获取页面某一元素的绝对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. Qt程序调试之Q_ASSERT断言(它是一个宏,接受布尔值,当其中的布尔值为真时,便什么也不做)

    在使用Qt开发大型软件时,难免要调试程序,以确保程序内的运算结果符合我们的预期.在不符合预期结果时,就直接将程序断下,以便我们修改. 这就用到了Qt中的调试断言 - Q_ASSERT. 用一个小例子来 ...

  2. js配合My97datepicker给日期添加天数

    <input name="ctl00$ContentPlaceHolder1$txtTimeStart" type="text" value=" ...

  3. 理性分析 C++(-O2) 和 JS 的性能差距

    laptop: Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz.. Test1: 最后一行:时间(ms) #pragma GCC optimize("O2& ...

  4. Java学习笔记九

    GUI:图形用户界面,Java不常用于创建桌面应用,所以用的比较少 一.概述: 二.Frame演示: 三.事件监听机制 import java.awt.Button; import java.awt. ...

  5. bzoj3786星系探索(splay维护dfs序)

    Description 物理学家小C的研究正遇到某个瓶颈. 他正在研究的是一个星系,这个星系中有n个星球,其中有一个主星球(方便起见我们默认其为1号星球),其余的所有星球均有且仅有一个依赖星球.主星球 ...

  6. PatentTips - Virtual machine management using processor state information

    BACKGROUND OF THE INVENTION The invention generally relates to virtual machine management, and more ...

  7. 让我们彻底看清MVC、MVP

    这里開始记录下来自己对MVC.MVP.MVVM这三种框架模式的理解,本文从以下几个方面来梳理. 架构的目的 框架模式.设计模式 MVC设计的介绍 MVC在Android中的应用 MVC该怎样设计 MV ...

  8. quartz中的corn表达式(转)

    Quartz的cron表达式 一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素. 按顺序依次为 秒(0~59) 分钟(0~59) 小时(0~23) 天(月)(0~31,可是你须要考虑你月 ...

  9. java 文件读写--转载

    读文件 http://www.baeldung.com/java-read-file Java – Read from File 1. Overview In this tutorial we’ll ...

  10. VUE笔记 - 品牌后台 - v-for Splice Some Filter findIndex indexOf 直接return函数结果

    <body> <div id="app"> <div class="panel panel-primary"> <di ...