您的位置：首页 > 其它

pageX, clientX, offsetX/layerX, screenX, scrollLeft()属性

2015-07-17 11:45 253 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航