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. [zt]摄像机标定(Camera calibration)笔记

    http://www.cnblogs.com/mfryf/archive/2012/03/31/2426324.html 一 作用建立3D到2D的映射关系,一旦标定后,对于一个摄像机内部参数K(光心焦 ...

  2. Vue.js基本规则提炼总结及计算属性学习

    Vue.js基本须知: 1)以“{{}}”格式 “Mustache” 语法(双大括号)来绑定表达式输出文本值; 2)以“{{{}}}”格式绑定原始的html,绑定的表达式内为字符串格式的html内容, ...

  3. Oracle三大经典表连接适用情况

    1.1环境准备 1.2 Nested Loops Join 从上面的试验来看,nested loop jion基本上是没有限制的,可以支持所有的运算. 1.3 Hash Join 1.4 Merge ...

  4. ajaxfileupload.js

    jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' ...

  5. BizTalk开发系列(三十三)BizTalk之Excel终极解决方案

    Excel作为优秀的客户端数据处理程序得到了广泛的应用. 由于其简单又强大的功能在很多公司或个人的数据处理中占用非常重要的位置. 而BizTalk作为微软的SOA主打产品虽然免费提供了很多Adapte ...

  6. 【转】统计模型-n元文法

    在谈N-Gram模型之前,我们先来看一下Mrkove假设: 1.一个词的出现仅仅依赖于它前面出现的有限的一个或者几个词: 2.一个词出现的概率条件地依赖于前N-1个词的词类. 定义 N-Gram是大词 ...

  7. Print all nodes at distance k from a given node

    Given a binary tree, a target node in the binary tree, and an integer value k, print all the nodes t ...

  8. 【iCore3双核心板】【4.3寸液晶驱动板爆照！】

     [源代码完全开源,过几天连同硬件一起发布] 花了好久的时间,我们的fpga工程师才完成这液晶模块的驱动代码,其核心价值如下: 1.完全基于fpga驱动,sdram当做缓存: 2.内建双缓冲机制:方便 ...

  9. Thinking in Java——笔记(5)

    Initialization & Cleanup Guaranteed initialization with the constructor In Java, the class desig ...

  10. php发送post请求到nodejs服务器

    curl_setopt ( $ch, CURLOPT_POSTFIELDS, $data ); 改为 curl_setopt ( $ch, CURLOPT_POSTFIELDS, http_build ...