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. 【hihoCoder】1049.后序遍历

    问题:http://hihocoder.com/problemset/problem/1049?sid=767510 已知一棵二叉树的前序遍历及中序遍历结果,求后序遍历结果 思路: 前序:根-左子树- ...

  2. js流程控制语句

    do...while语句 do...while语句是一种先运行,后判断的循环语句.也就是说,不管条件是否满足,至少先运行一次循环体. var box = 1;                      ...

  3. Daily Scrum 10.27

    今天是星期天,但大家都没有放松,还是抽出了一定的时间来完成任务.可以感觉出来在编译作业的压力下大家的热情不是很高涨,希望大家坚持下去. 下面是今天的Task统计: 下面是所有迭代的状态:

  4. preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead

    由于方法preg_replace()为PHP 5.5.x 中废弃的特性,官方建议需要在代码中将preg_replace()替换为函数preg_replace_callback,可以问题解决. 具体请见 ...

  5. 前端技术-PS切图

    页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...

  6. vbox下Oracle Enterprise liunx5.4虚拟机安装10G RAC实验(一)

    1.配置第一个虚拟机 1.1 安装后的登录界面 1.2 第1台机器(单数据配置方面) 1.2.1 验证安装包 1.2.2 修改内核参数 1.2.3添加安全限制 1.2.4关闭防火墙 1.2.5添加用户 ...

  7. 为Eclipse安装主题插件

    方法2:通过站点更新 eclipse:Help->Install New Software->Work with:Update Site -http://eclipse-color-the ...

  8. poj1061-青蛙的约会（扩展欧几里德算法）

    一,题意: 两个青蛙在赤道上跳跃,走环路.起始位置分别为x,y. 每次跳跃距离分别为m,n.赤道长度为L.两青蛙跳跃方向与次数相同的情况下, 问两青蛙是否有方法跳跃到同一点.输出最少跳跃次数.二,思路 ...

  9. EmguCV+Win7+Visual C# 2012 配置

    一.下载与安装OpenCV 安装包版本:OpenCV2.4.2 X86 下载地址:http://sourceforge.net/projects/opencvlibrary/files/opencv- ...

  10. Network | UDP checksum

    1. 校验和 ICMP,IP,UDP,TCP报头部分都有checksum(检验和)字段.IP 首部里的校验和只校验首部:ICMP.IGMP.TCP和UDP首部中的校验和校验首部和数据. UDP和TCP ...