怎样让图片随鼠标移动？

最新推荐文章于 2023-09-08 18:50:39 发布

Warriorkris0816

最新推荐文章于 2023-09-08 18:50:39 发布

阅读量236

点赞数

分类专栏： JS编程题

本文链接：https://blog.csdn.net/CKT0816/article/details/104744822

版权

JS编程题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第1种方法

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			#img {
				position: absolute;
			}

			body {
				height: 1000px;
				width: 1000px;

			}
		</style>
	</head>
	<body>
		<img id="img" src="../images/aa.jpg" alt="">
		<script src="common.js"></script>
		<script>
			var img = document.getElementById("img");
			document.onmousemove = function(event) {
				//解决兼容问题
				event = event || window.event;
				//获取鼠标的坐标
				//client可见窗口坐标
				// var X=event.clientX;
				// var Y=event.clientY;
				//div的偏移量是相对于整个页面的
				// var X=event.pageX;//IE8不适用
				// var Y=event.pageY;

				//火狐等浏览器认为浏览器的滚动条是html的
				var st = document.body.scrollTop || document.documentElement.scrollTop;
				var sl = document.body.scrollLeft || document.documentElement.scrollLeft;

				var X = event.clientX;
				var Y = event.clientY;
				//设置图片坐标
				img.style.left = X + sl + "px";
				img.style.top = Y + st + "px";
			}
		</script>
	</body>
</html>