浏览器距离

最新推荐文章于 2020-11-16 16:59:07 发布

忆成风

最新推荐文章于 2020-11-16 16:59:07 发布

阅读量183

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/lhzau1996/article/details/85386445

版权

html 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>浏览器距离</title>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
		<style>
			.one{
				float: left;
				width: 398px;
				height: 398px;
				border: 1px solid red;
				cursor:crosshair;
				margin-left: 100px;
				margin-top: 100px;
			}
			.two{
				float: left;
				width: 100px;
				height: 100px;
				margin-left: 20px;
				border: 1px solid red;
			}
			.three{
				float: left;
				width: 100px;
				height: 100px;
				margin-top: 100px;
				margin-left: 20px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id = "one" class = "one">
			
		</div>
		<div id = "two" class = "two">
			
		</div>
		<div id = "three" class = "three">
			
		</div>
		<script>
			$("#one").mousemove(function(event){
				$("#two").css("width",event.clientX);
				$("#two").css("height",event.clientY);
				$("#three").css("width",event.offsetX);
				$("#three").css("height",event.offsetY);
			})
		</script>
	</body>
</html>