pageX, clientX, offsetX/layerX, screenX, scrollLeft()属性
来源:互联网 发布:音乐网站源码带手机版 编辑:程序博客网 时间:2024/06/05 08:08
e.pageX——是鼠标指针的位置,相对于文档的左边缘,即相对整个页面的坐标(IE8及其以下的版本不支持该属性)
$(selector).scrollLeft(position)——返回(无position)或设置(设置position)匹配元素的滚动条的水平位置
e.clientX——返回当事件被触发时鼠标指针向对于浏览器页面(或当前窗口)的水平坐标,即相对可视区域的坐标
e.offsetX/e.layerX——相对当前坐标系的border左上角开始的坐标,只在你想要取得一个元素相对于它的绝对定位的父元素的位置时有用处(不被所有的浏览器支持,firefox支持e.layerX,而IE支持e.offsetX)
e.screenX——返回事件发生时鼠标指针相对于屏幕的水平坐标
同理,不在赘述 e.pageY, $(selector).scrollTop(position), e.clientY, e.offsetY/e.layerY, e.screenY
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>demo2</title><meta name="description" content=""><meta name="keywords" content=""><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script><style type="text/css"> *{margin:0;padding:0;} body{ position:relative; color:#fff; font-family: "微软雅黑"; }.div1,.div2,.div3{width:1500px;height:400px;line-height: 400px;font-size: 24px;text-align: center;}.div1{background: #f00;}.div2{background: #0f0;}.div3{background: #00f;}.div4{width:350px;height:250px;background: purple;font-size: 16px;text-align: left;padding-left:20px;position: fixed;left:0;top:0;}.div4 p{padding:10px 0;}</style></head><body><div class="div1"><p>div1 width:1500px height:400px</p></div><div class="div2"><p>div2 width:1500px height:400px</p></div><div class="div3"><p>div3 width:1500px height:400px</p></div><div class="div4"><p id="mouse"></p><p id="scroll"></p><p id="browser"></p><p id="offset"></p><p id="screen"></p></div><script type="text/javascript"> $(function(){ $(document).mousemove(function(e){ $('#mouse').text('pageX:'+e.pageX+'px, pageY:'+e.pageY+'px'); $('#scroll').text('scrollLeft:'+$(document).scrollLeft()+'px, srollTop:'+$(document).scrollTop()+'px'); $('#browser').text('clientX:'+e.clientX+'px, clientY:'+e.clientY+'px'); $('#offset').text('offsetX:'+e.offsetX+'px, offsetY:'+e.offsetY+'px'); $('#screen').text('screenX:'+e.screenX+'px, screenY:'+e.screenY+'px'); }); })</script></body></html>
0 0
- pageX, clientX, offsetX/layerX, screenX, scrollLeft()属性
- offsetX, clientX, pageX, screenX, layerX,
- clientX、screenX、pageX、offsetX、layerX
- clientX, pageX, offsetX,x, layerX, screenX, offsetLeft
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft
- pageX、clientX、screenX、offsetX、layerX、x
- screenX/clientX/pageX/layerX/offsetX/x
- pageX、clientX、screenX、offsetX、layerX、x
- pageX、clientX、screenX、offsetX、layerX、x
- pageX、clientX、screenX、offsetX、layerX、X
- pageX、clientX、screenX、offsetX、layerX、x
- clientX,pageX,offsetX,layerX,screenX,offsetLeft区别分析
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别
- pageX、clientX、screenX、offsetX、layerX、x区别 && click && stroke/fill
- clientX,pageX,screenX,offsetX,layerX,x的那些事
- screenX clientX pageX offsetX
- offsetX pageX clientX screenX
- 【cocos2d-x】CCScene
- 对于linux常用命令的学习与总结 附上开机默认启动的图形界面修改为字符界面以及挂载光盘的过程
- CXF webService 日志
- 【Java】利用文件通道的方式改进Java复制单个文件的方法
- 安桌屏幕虚拟按键适配
- pageX, clientX, offsetX/layerX, screenX, scrollLeft()属性
- Redis数据类型--ZSET
- 自定义UINavigationController的后退按钮标题
- 一张拓扑图引起的“纠纷”
- GeoGlobe系列软件使用流程
- 2012年5月SAT香港真题解析
- Javascript模块化编程(一):模块的写法
- 阿里云Centos6.5安装配置docker
- android webview实现加载效果