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

最新推荐文章于 2023-02-27 22:43:58 发布

何必诗债换酒钱

最新推荐文章于 2023-02-27 22:43:58 发布

阅读量798

点赞数

分类专栏： web前端文章标签： CSS web前端

本文链接：https://blog.csdn.net/u014395524/article/details/46925351

版权

web前端专栏收录该内容

74 篇文章 1 订阅

订阅专栏

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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
pageX, clientX, offsetX/layerX, screenX, scrollLeft()属性

e.pageX——是鼠标指针的位置，相对于文档的左边缘，即相对整个页面的坐标（IE8及其以下的版本不支持该属性）$(selector).scrollLeft(position)——返回（无position）或设置（设置position）匹配元素的滚动条的水平位置e.clientX——返回当事件被触发时鼠标指针向对于浏览器页面（或当前窗口）的水平坐标，即相对可视区域的坐标e.offset
复制链接

扫一扫

专栏目录