<!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. windows 可执行文件分析

    windows可执行文件是什么? 是具有PE文件格特性的文件,例如:.exe.dll.ocx等文件. 注:(这里只是让大家能明了一些,其实,可执行与否,和后缀没有什么关系,后缀只是windows方便管 ...

  2. Docker系列(十六)：搭建Openshift环境

    目的: 搭建Linux下的Openshift环境. 参考资料: 开源容器云OpenShift 构建基于Kubernetes的企业应用云平台 ,陈耿 ,P253 ,2017.06 .pdf 下载地址:h ...

  3. SpringBoot 05_集成SpringDataJpa

    你还在为项目的集成头疼吗?你还在为管理大量的配置文件烦恼吗?如果是,用SpringBoot吧!今天主要介绍如果在SpringBoot的基础上创建一个集成了SpringDataJpa的项目,至于Spri ...

  4. Vue中的better-scroll插件

    Vue中的better-scroll插件 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScrol ...

  5. 05_Hibernate数据库连接池

    一.配置连接池 连接池:连接池是创建和管理数据库连接的缓冲池技术. 优点:合理利用数据库连接资源.简化的编程模式.受控的资源使用. 主流连接池: DBCP(DataBase connection po ...

  6. Struts2入门问题

    一 使用Struts 2 开发程序的基本步骤 加载Struts2 类库 配置web.xml文件 开发视图层页面 开发控制层Action 配置struts.xml文件 部署.运行项目 第一步先导架包:在 ...

  7. Ubuntu时间管理方法

    1. date 命令主要用于显示以及修改系统时间 2. hwclock 命令用于查看设置硬件时间,以及同步硬件时间与系统时间 # 显示硬件时间hwclock # 设置硬件时间hwclock -set ...

  8. [转]WPF--模板选择

    典型的,把模板关联到一块特定的数据上,不过通常希望动态的确定使用哪个模板---既可以基于一个属性值,也可以是一个全局状态.当真正需要大规模替换模板时,也可以使用DataTemplateSelector ...

  9. new运算符与malloc函数（还需要修改）

    细说new与malloc的10点区别 C++ 自由存储区是否等价于堆? 浅谈new/delete和malloc/free的用法与区别 new和malloc都是在对上开辟内存,但尽量使用new. 使用m ...

  10. hadoop2.2 window下报错的问题（winutils.exe）

    在windows下开发hadoop一直正常,但把hadoop集群升级到2.0版本以上,在eclipse下执行程序会报打不到winutils.exe的错误,这是因为hadoop2.2没有发布winuti ...