jquery中clientY,pageY和screenY的区别
2015-11-06 16:32
721 查看
<span style="font-size:18px;"><!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> <span style="color:#FF0000;">screenX,screenY是距离屏幕边缘的距离 <img src="http://img.blog.csdn.net/20151106163315008?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" /> clientX,clientY是距离当前可是窗口的距离 <img src="http://img.blog.csdn.net/20151106163337404?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" /> pageX,pageY是相对于当前页面中的坐标(会随着滚动条的滚动而变化) <img src="http://img.blog.csdn.net/20151106163526445?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" /> </span></span>
相关文章推荐
- JS.jQuery获取浏览器参数
- jquery播放图片
- jquery进度条
- jQuery jQuery on()方法
- jQuery Mobile样式加载问题
- Jquery AutoComplete的使用方法实例
- JQuery技巧
- jquery easyui 添加按钮逻辑,未渲染
- jquery取消和绑定事件
- Jquery -- JQuery对象操作(附对应JS方法)
- 共有25款 jQuery自动完成插件开源软件
- 对jquery val 获取input 文本框值进行扩展
- Jquery系列问题
- jquery判断checkbox是否被选中
- JQuery EasyUI Tree
- jQuery中的text()、html()和val()以及javascript中的innerText、innerHTML和value
- jQuery获取字符串末尾字符
- jQuery的简易在线客服
- js、jquery常用
- jQuery:插件开发步骤