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. uva705--slash maze

    /*这道题我原本是将斜线迷宫扩大为原来的两倍,但是在这种情况下对于在斜的方向上的搜索会变的较容易出错,所以参考了别人的思路后将迷宫扩展为原来的3倍,这样就变成一般的迷宫问题了*/ #include&q ...

  2. mac下使用glew库，方法

    mac下使用glew库,方法 分类: OpenGL2015-01-15 15:52 210人阅读 评论(0) 收藏 举报   目录(?)[+]   主要参考http://www.cnblogs.com ...

  3. PNG格式的图像文件，创建的图像的MIME类型的头部

    在安装完这三个组件后,还需要重新配置一次PHP,这也是你对采用DSO方式安装PHP感到庆幸的地方之一.运行make clean,然后在当前的配置中添加下面的内容: --with-gd=[/path/t ...

  4. 让dwz 在td里显示图片

    让dwz 在td里显示图片 <!@{foreach from = $list item = element}@> <tr target="gid" rel=&qu ...

  5. Leetcode | Linked List Cycle I && II

    一.判断链表是否存在环,办法为: 设置两个指针(fast, slow),初始值都指向头,slow每次前进一步,fast每次前进二步,如果链表存在环,则fast必定先进入环,而slow后进入环,两个指针 ...

  6. Apache Spark技术实战之7 -- CassandraRDD高并发数据读取实现剖析

    未经本人同意,严禁转载,徽沪一郎. 概要 本文就 spark-cassandra-connector 的一些实现细节进行探讨,主要集中于如何快速将大量的数据从cassandra 中读取到本地内存或磁盘 ...

  7. ExtJS笔记 Grids

    参考:http://blog.csdn.net/zhangxin09/article/details/6885175 The Grid Panel is one of the centerpieces ...

  8. NEC学习 ---- 模块 - 上图下文图文列表

    上图下文图文列表的效果如下图: 可以看到三个红色框中的三中"上图下文的图文列表"; 这里的代码其实没什么问题, 对于这种布局, 其实可以参考我上一篇介绍: NEC学习 ---- 模 ...

  9. java IO 学习总结

    推荐文章:java I/O学习 只要是处理纯文本数据,就要优先考虑使用字符流,除此之外都用字节流 字符流:FileReader和BufferedReader的使用 String path = &quo ...

  10. iTunes.exe 在win7系统中运行出错解决办法

    重新安装了iTunes打开后就报错,然后直接退出 查windows日志提示错误应用程序名称: iTunes.exe 错误模块名称: KERNELBASE.dll 重新安装iTunes问题依旧,后来在G ...