<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jquery获取坐标</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    * {margin: 0;padding: 0;}
    div p {
        display: inline-block;box-sizing: border-box;
    }
</style>
</head>
<body style="height:1200px;">
<div style="width:100%;position: fixed;top: 0;background: #000;color: white;padding: 2px 20px;">
<p>鼠标当前的屏幕坐标是：<span class="showCoordinate">x:0,y:0</span></p>
<p>鼠标当前窗口客户区的坐标是：<span class="showCusCoord">x2:0,y2:0</span></p>
<p>鼠标在窗口页面中的坐标是：<span class="showPageCoord">x3:0,y3:0</span></p>
</div>
    <script src="../jquery1.js"></script>
    <script>
    $(document).ready(function(){
        $(document).mousemove(function(e){
            //获取鼠标在屏幕上的坐标
            x=e.screenX;//屏幕的左上角为参考点
            y=e.screenY;//获取屏幕的x和y坐标
            $(".showCoordinate").text("screenX:"+x+",screenY:"+y);
            //获取鼠标在当前窗口区域中的坐标
            x2=e.clientX;
            y2=e.clientY;
            $(".showCusCoord").text("clientX:"+x2+",clientY:"+y2);
            //返回事件被触发时鼠标指针相对于文档左边缘的位置
            x3=e.pageX;
            y3=e.pageY;(会随着滚动条的变化而变化)
            $(".showPageCoord").text("pageX:"+x3+",pageY:"+y3);
            
        });
    });    
    </script>
</body>
</html>

screenX,screenY是距离屏幕边缘的距离

clientX,clientY是距离当前可是窗口的距离

pageX,pageY是相对于当前页面中的坐标（会随着滚动条的滚动而变化）

jquery中clientY，pageY和screenY的区别 最后三张图一目了然。的更多相关文章

  1. jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...

  2. jQuery中的bind() live() delegate()之间区别分析

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  3. 深入理解jQuery中live与bind方法的区别

    本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...

  4. jQuery中attr和prop方法的区别说明

    jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check  node=123 id=ck & ...

  5. jquery中的$().each和$.each的区别

    jquery中的$().each和$.each的区别 注意:jquery中的$().each和$.each的区别,前者只能遍历数组,后者可以遍历数组和对象 备注:sinobook项目中地名本体相关地按 ...

  6. jQuery中attr和prop方法的区别

    jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...

  7. jquery中的this与$(this)的区别总结（this：html元素）（$(this)：JQuery对象）

    jquery中的this与$(this)的区别总结(this:html元素)($(this):JQuery对象) 一.总结 1.this所指的是html 元素,有html的属性,可用 this.属性  ...

  8. jquery中this与$(this)的用法区别

    jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test ...

  9. jquery 中 html与text函数的区别

    jquery 中 html与text函数的区别 共同点:它们都能讲函数中的参数渲染到页面中: 异同点: text() 只是简单的讲参数的内容写入到页面中: html() 会根据参数的值,判断是否字体符 ...

随机推荐

  1. 菜鸟nginx源码剖析数据结构篇（七） 哈希表 ngx_hash_t（下）[转]

    菜鸟nginx源码剖析数据结构篇(七) 哈希表 ngx_hash_t(下) Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.c ...

  2. iOS开发CoreData的多表关联

    1.多表关联 多表关联,对SQL 数据库的操作,在一张表的数据中可以引用另外一张表里的数据.通过 Entity 实体中的 Relationships 来实现,比起传统的 SQL 数据库来,更加简单. ...

  3. PAT甲级——A1091 Acute Stroke【30】

    One important factor to identify acute stroke (急性脑卒中) is the volume of the stroke core. Given the re ...

  4. nulls_hlist原理 和 tcp连接查找

    原文链接 http://abcdxyzk.github.io/blog/2018/09/28/kernel-sk_lookup/

  5. grant

    # 添加超级用户 grant all privileges on *.* to 'dump_tmp'@'10.10.10.10' identified by 'dump_tmp'; grant all ...

  6. Ubuntu下samba的安装和配置

    samba是Linux系统上的一种文件共享协议,可以实现Windows系统访问Linux系统上的共享资源,现在介绍一下如何在Ubuntu 14.04上安装和配置samba一. 一.更新源列表 打开&q ...

  7. [编织消息框架][JAVA核心技术]数值与逻辑分离

    为什么要分离? 业务需求是不停地变,如果把条件写进代码里,当用户需求变时要改代码发版本更新才能生效,这过程无疑是漫长的 就算是在开发期,不停的变开发者精力耗光在沟通,小修改上,无法专注逻辑部分 分离的 ...

  8. android 开发环境问题

    一.console出现The connection to adb is down, and a severe error has occured. .先把eclipse关闭. .在管理器转到你的and ...

  9. 封装原生JavaScript的ajax

    function obj2str(data) { data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象 data.t = new Date().getTi ...

  10. Junit5的依赖添加及RunWith(SpringJUnit4ClassRunner.class)注解使用

    首先Junit5依赖应该配置为 <dependency> <groupId>org.junit.jupiter</groupId> <artifactId&g ...