Blogger Information
Blog 19
fans 0
comment 0
visits 13304
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
鼠标在元素中的相对位置坐标-2019年2月29号
倪偌卟離
Original
603 people have browsed it

实例

<!DOCTYPE html>
	<html>
		<head>
			<title>光标的位置坐标</title>
			<meta charset="utf-8">
			<style type="text/css">
				*{margin:0;padding:0;}
				.main{
					width:500px;
					height:500px;
					margin:20px auto;
					border:1px solid #ccc;
					}
				p{
					margin:0 auto;
					width: 500px;
					border:1px solid #ccc;
					height: 30px;
					line-height: 30px;
					padding-left:10px;
				}
				
			</style>
		</head>
		<body>
			<div class="main"></div>
			<p>坐标为<b id="show"></b></p>
			<script type="text/javascript">
				window.onload=function(){
					var odiv=document.getElementsByClassName('main')[0];
					var oid=document.getElementById('show');
					odiv.onmousemove=function(event){
						var e=event || window.event;
						var m_x=e.clientX;//光标相对于文档的x轴坐标
						var m_y=e.clientY;//光标相对于文档的y轴坐标
						var d_x=this.offsetLeft;//div元素相对于文档x轴坐标
						var d_y=this.offsetTop;//div元素相对于文档y轴坐标
						var mx=e.offsetX;//光标相对于元素div的x轴坐标
						var my=e.offsetY;//光标相对于元素div的y轴坐标
						//即.mx=m_x-d_x,my=m_y-d_y
						//注释:元素相对于文档的位置,是指元素左上方顶点的位置!!!
						oid.innerHTML='('+m_x+' '+m_y+')'+' '+'('+mx+' '+my+')'+' '+'('+d_x+' '+d_y+')';
					}
			}
			</script>
		</body>
	</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post