event.pageX　　get mouse position

　　Description: The mouse position relative to the left edge of the document.

Example

 <script>

     $(document).on( "mousemove", function( event ) {

         console.log( "pageX: " + event.pageX + ", pageY: " + event.pageY );

     });

 </script>

.offset()　　get offset position of an element

　　Description: Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

Example(get)

 <script>

     var p = $(element);

     var offset = p.offset();

     p.html( "left: " + offset.left + ", top: " + offset.top );

 </script>

Example(set)

 <script>

     // the parameter must be PlainObject

     var coord = {top: 50, left: 100};

     $(element).offset(coord);

 </script>

.position()    get the relative Position of an element

　　Description: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

　　Note: this method does not accept any arguments.

Example

 <script>

     var p = $(element);

     var position = p.position();

     console.log( "left: " + position.left + ", top: " + position.top );

 </script>

.scrollTop()

　　Description: Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

Example(get)

 <script>

     var p = $(element);

     console.log( "scrollTop:" + p.scrollTop() );

 </script>

Example(set)

 <script>

     var topValue = 500;

     $(element).scrollTop(topValue);

 </script>

相关：.scrollLeft()

The difference between screenX/Y, clientX/Y and pageX/Y

  1. pageX/Y     gives the coordinates relative to the <html> element in CSS pixels.
  2. clientX/Y    gives the coordinates relative to the viewport in CSS pixels.
  3. screenX/Y  gives the coordinates relative to the screen in device pixels.

Example

 <script>

     document.addEventListener('click', function(e) {

         console.log(

             'page: ' + e.pageX + ',' + e.pageY,

             'client: ' + e.clientX + ',' + e.clientY,

             'screen: ' + e.screenX + ',' + e.screenY)

     });

 </script>

A picture explaining the difference between pageY and clientY:

jQuery Scroll to bottom of page/iframe

 <script>

     $('html, body').animate({

        scrollTop: $(document).height()-$(window).height()},

        2000

     );

 </script>

Composite example

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title>Demo</title>

   </head>

   <body style="height:1000px;">

     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

     <div id="A" style="left:100px;"> Default    <br /> mouse<br/>position </div>

     <div id="B" style="left:300px;"> offset()   <br /> mouse<br/>position </div>

     <div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>

     <div id="D" style="left:700px;"> client     <br /> mouse<br/>position </div>

   </body>

   <style>

   #A,#B,#C,#D {

     width: 100px;

     height: 100px;

     cursor: pointer;

     background: #2f2f2f;

     position: absolute;

     top: 50px;

     color: #fff;

     font: bold 15px Arial;

   }

   </style>

   <script>

       $(document).ready(function (e) {

           // pageX

           $('#A').click(function (e) {

               console.log(e.pageX + ' , ' + e.pageY);

           });

           // offset()

           $('#B').click(function (e) {

               var posX = $(this).offset().left,

                   posY = $(this).offset().top;

               console.log((e.pageX - posX) + ' , ' + (e.pageY - posY));

           });

           // position

           $('#C').click(function (e) {

               var posX = $(this).position().left,

                   posY = $(this).position().top;

               console.log((e.pageX - posX) + ' , ' + (e.pageY - posY));

           });

           // client offset scroll

           $('#D').click(function (e) {

               var offset_t = $(this).offset().top - $(window).scrollTop();

               var offset_l = $(this).offset().left - $(window).scrollLeft();

               var left = Math.round( (e.clientX - offset_l) );

               var top = Math.round( (e.clientY - offset_t) );

               console.log("Left: " + offset_t + " Top: " + offset_l);

       });

   });

   </script>

   </body>

 </html>

pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y的更多相关文章

  1. screenX、clientX、pageX的区别

    screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角 ...

  2. offset() position() scrollTop() scrollLeft()

    (1)offset:获取当前元素相对于文档的高度.只对可见元素有效. 不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移 (2) position:获取元素相对于最近的一 ...

  3. 一句话解释jquery中offset、pageX, pageY、position、scrollTop, scrollLeft的区别

    offset   元素相对文档的偏移 pageX, pageY 事件(鼠标)相对文档的偏移 注意:文档是指document, 而不是当前窗口,是包含了滚动位置的,即滚动条的位置对这些值是不产生影响的 ...

  4. 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕，相对浏览器窗口，相对文档的坐标详解

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

  5. pageX/pageY,screenX/screenY,clientX/clientY的差别

    pageX/pageY,screenX/screenY,clientX/clientY的差别 $(document).click(function(e){ //x方向无差别 //alert(e.pag ...

  6. 18年春招某编程题：有三个整数X,Y,Z,要求进行若干次操作使得X,Y,Z相等

    题目描述: 给定三个整数X,Y,Z,要求进行若干次操作使得X,Y,Z相等,操作有两种: 1.从X,Y,Z中选择两个数都加1. 2.从X,Y,Z中选择一个数加2. 求最少需要多少次操作. 题目思路: 1 ...

  7. 函数的光滑化或正则化 卷积 应用 两个统计独立变量X与Y的和的概率密度函数是X与Y的概率密度函数的卷积

    http://graphics.stanford.edu/courses/cs178/applets/convolution.html Convolution is an operation on t ...

  8. javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX

    原文:https://www.cnblogs.com/ifworld/p/7605954.html 元素宽高 offsetWidth //返回元素的宽度(包括元素宽度.内边距和边框,不包括外边距) o ...

  9. clientX、pageX、offsetX、screenX的区别

    这几个属性的区别说难不难,可是很容易搞混,很长一段时间没用,发现又忘记区别了,记不清哪个是哪个!真的很抓狂! 区别: clientX.clientY: 相对于浏览器窗口可视区域的X,Y坐标(窗口坐标) ...

随机推荐

  1. Hibernate映射多对多双向关联关系（小案例）

    多对多双向关联关系(Project(工程)/Emp(员工)为案例): 步骤如下: 1.创建Project类,并需要定义集合类型的Emp属性 public class Project { //编号 pr ...

  2. 创造tips的秘籍——PHP回调后门

    作者:Phithon 原文连接:https://www.leavesongs.com/PENETRATION/php-callback-backdoor.html 最近很多人分享一些过狗过盾的一句话, ...

  3. 讨论一下js获取响应中后台传回来的BigInteger类型的数字时，后几位会自动变为0的问题

    后台返回的json:{"data":12345678912345678912} 在js中获取该data得到的值为:12345678912345680000 后经过实验发现,只有数字 ...

  4. CSS，bootstrap表格控制当td内容过长时用省略号表示，以及在不使用bootstrap时过长也用省略号表示

    首先需要在table中设置table-layout:fixed; <table style="table-layout:fixed"></table> 然后 ...

  5. iOS 编程思想

    一 面向过程编程: 处理事情以过程为核心,一步一步的实现 二 面向对象编程: 万物皆对象 三 链式编程思想: 将多个操作通过点链接在一起成为一句代码 特点:方法返回值是Block,block必须有一个 ...

  6. chineseChess

    最近学习了chineseChess的Qt实现,把一些东西总结一下: 实现功能: 1.人人对战 2.人机对战 3.网络版 一.基础性工作:(人人对战) 1.棋盘和棋子的绘制(QPinter,drawLi ...

  7. java中内部类使用小结

    内部类是指在一个外部类中再定义一个类,类名不需要和文件名相同 内部类可以是静态的,类的修饰符可以是private,default,protect,public修饰 ,而外部类只能是public 和 d ...

  8. 深入分析 Java 中的中文编码问题

    登录 (或注册) 中文 IBM 技术主题 软件下载 社区 技术讲座 打印本页面 用电子邮件发送本页面 新浪微博 人人网 腾讯微博 搜狐微博 网易微博 Digg Facebook Twitter Del ...

  9. [troubleshoot][archlinux][X] GPU HANG

    前言:如下内容已经是在hang完大概半个多月后了,当时想写,一直没过来写,写blog果然也是已经花费时间的事情. 最近一直在休假,电脑的使用频率也不多.后来还是为了生活,不情愿的去开始上班了,上班的第 ...

  10. 【翻译】How To Tango With Django 1.5.4 第三章

    django基础 3.1测试你的配置 测试你的python版本和你的django版本是否兼容 3.2新建django工程 在dos里面进到你事先新建的code文件夹,然后在执行下列命令新建工程 c:\ ...