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() 会根据参数的值,判断是否字体符 ...
随机推荐
- ssh 与服务器保持连接
直接改客户端,服务器端不应该更改. sudo vi /etc/ssh/ssh_config # 或 ~/.ssh/config TCPKeepAlive=yes # Client每隔 60 秒发送一次 ...
- HTML 颜色表示
三种表示方法 1 颜色单词 : blue green red pink 2 10进制表示: RGB(255, 10, 0) 3 16进制表示: #FF0000(红) #00FF00(绿)
- np一些基本操作1
##生成一个一维数组import numpy as np;nb7 = np.arange(0,100,2);print(nb7)print("======================== ...
- MaxCompute问答整理之8月
本文是基于对MaxCompute产品的学习进度,再结合开发者社区里面的一些问题,进而整理成文.希望对大家有所帮助. 问题一.通过数据源数据增量同步后,如何查看某一条数据具体被同步到MaxCompute ...
- 2018.10.29安装tensorflow
先安装tensorflow时按照中文社区安装,结果安装的0.5版本与cuda和cudnn版本不一样,后面才知道需要安好对应版本安装. 1.卸载protobuf pip uninstall protob ...
- 19-10-23-L-Mor
ZJ一下: 挺好,T2打表差点出规律(最近拿PFGYL硬卡提升自己几乎没有的打表水平) T1竟然……是个××题 T3的Floyd写死了. T1 简单思考会发现……直接全异或起来就AC 话说T1真叫最大 ...
- Ubuntu为什么远程连接不上
因为没有安装ssh,输入以下命令, sudo apt-get install openssh-server openssh-client执行完再用xshell就可以连接上了
- Maven实战07_依赖
1:依赖声明 <project> ... <dependencies> <dependency> <groupId>...</groupId> ...
- Redis学习笔记02-消息队列与延时队列
写在前面:Redis的消息队列并不是专业的消息队列,没有ACK保证,没有特别多的高级特性,如果对消息的可靠性有很高的要求,就放弃它吧. 1.Redis消息队列 Redis通过内部的list数据结构来实 ...
- sqoop的数据抽取过程记录
今天公司抽取了4千万的表大概十几G 用sqoop抽取是30--40分钟 开了两个map.模型是oracle----hdfs(hive).以前只抽过几十万级别,所以千万级别感觉还是spilt做好切分和定 ...