jquery中clientY,pageY和screenY的区别 最后三张图一目了然。
<!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的区别 最后三张图一目了然。的更多相关文章
- jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画
地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...
- jQuery中的bind() live() delegate()之间区别分析
jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...
- 深入理解jQuery中live与bind方法的区别
本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...
- jQuery中attr和prop方法的区别说明
jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check node=123 id=ck & ...
- jquery中的$().each和$.each的区别
jquery中的$().each和$.each的区别 注意:jquery中的$().each和$.each的区别,前者只能遍历数组,后者可以遍历数组和对象 备注:sinobook项目中地名本体相关地按 ...
- jQuery中attr和prop方法的区别
jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...
- jquery中的this与$(this)的区别总结(this:html元素)($(this):JQuery对象)
jquery中的this与$(this)的区别总结(this:html元素)($(this):JQuery对象) 一.总结 1.this所指的是html 元素,有html的属性,可用 this.属性 ...
- jquery中this与$(this)的用法区别
jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test ...
- jquery 中 html与text函数的区别
jquery 中 html与text函数的区别 共同点:它们都能讲函数中的参数渲染到页面中: 异同点: text() 只是简单的讲参数的内容写入到页面中: html() 会根据参数的值,判断是否字体符 ...
随机推荐
- 反编译之dex2jar工具
1.下载地址https://sourceforge.net/projects/dex2jar/files/?source=navbar bat是Windows系统使用,sh是mac系统使用!
- 服务器迁移部署PosEdi
绑定 基本配置 高级配置
- CheckBox自定义样式
效果: xmal代码: <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}"> & ...
- flink第一个应用
去年华为大佬就开始在用flink,今天刚有空就稍微跟着写了个demo玩起来(就不用java了 spark和flink还是用scala玩) package flink.testimport org.ap ...
- 如何做系列(5)-james mail安装总结
安装james还是比较复杂的,我们在EC2上花费了差不多一天,发现不能发送邮件到外网,后续又陆续花了几天的时间,才成功搭建james邮件服务器. 现在愿意把我们的经历分享出来,让大家参考一下. 由于项 ...
- (补充)06.Hibernate持久化类&持久化对象
持久化类:就是一个Java类(JavaBean),这个类与表建立映射关系就可以成为是持久类 持久化类 = JavaBean + xxx.hbm.xml 编写规则: 1.提供一个无参数,public访问 ...
- [转]C#委托的异步调用
本文将主要通过“同步调用”.“异步调用”.“异步回调”三个示例来讲解在用委托执行同一个“加法类”的时候的的区别和利弊. 首先,通过代码定义一个委托和下面三个示例将要调用的方法: ); //模拟该方法运 ...
- Python中的sort()
Python中的sort()方法用于数组排序,本文以实例形式对此加以详细说明: 一.基本形式列表有自己的sort方法,其对列表进行原址排序,既然是原址排序,那显然元组不可能拥有这种方法,因为元组是不可 ...
- Django项目:CRM(客户关系管理系统)--65--55PerfectCRM实现CRM客户报名状态颜色变化
# kingadmin.py # ————————04PerfectCRM实现King_admin注册功能———————— from crm import models #print("ki ...
- SQL server插入数据后,获取自增长字段的值
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 insert into Tb_People(uname,er ...