JS(js）实时显示鼠标位置信息

最新推荐文章于 2022-08-23 17:22:49 发布

laity01

最新推荐文章于 2022-08-23 17:22:49 发布

阅读量582

点赞数

分类专栏：练习文章标签： HTML JavaScript 鼠标事件坐标显示动态效果

本文链接：https://blog.csdn.net/m0_57675124/article/details/117704780

版权

练习专栏收录该内容

39 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>程彩虹</title>
		<style>
			#firdiv{
				width: 80px;
				height: 20px;
				background-color: aqua;
				display: none;
				position: absolute;
				top: 0px;
				left: 0px;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<div id="firdiv">
			<span id="firspan"></span>
		</div>
		
		<script>
			var x=0,y=0;
			function fun(){
				//获取鼠标位置
				x=window.event.x;
				y=window.event.y;
				//显示
				var span=document.getElementById('firspan');
				span.innerText="X:"+x+","+"Y:"+y;
				span.style.fontSize='12px';
				span.style.paddingLeft='6px';
				//移动框
				var fir=document.getElementById('firdiv');
				fir.style.display='block';
				fir.style.top=y+'px';
				fir.style.left=x+'px';
			}
			document.onmousemove=fun;
		</script>
	</body>
</html>