原生js跟着鼠标飞的图片e.clientX、e.clientY

最新推荐文章于 2024-08-30 20:29:15 发布

每一天，每一步

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量120

点赞数

分类专栏： javaScript 文章标签： javascript js html css

本文链接：https://blog.csdn.net/u010234868/article/details/118498912

版权

javaScript 专栏收录该内容

135 篇文章 12 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			height: 1000px;
		}
		#img {
			position: absolute; /*脱离文档流*/
		}
	</style>
</head>
<body>
	<img src="images/honeybee.gif" alt="" id="img">

	<script>
		var img = document.getElementById('img');
		document.onmousemove = function (e) {
			e = e || window.event;
			img.style.left = e.clientX -10 + 'px'; // -10让鼠标跟图片有10px的间距
			img.style.top = e.clientY -10 + 'px'; // body设置高度出现滚动条后 图片距离鼠标远

			// img.style.left = e.pageX + 'px';
			// img.style.top = e.pageY + 'px';
		};
	</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

每一天，每一步

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js跟着鼠标飞的图片e.clientX、e.clientY

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { height: 1000px; } #img { position: absolute; /*脱离文档流*/ } </style></head><bod.
复制链接

扫一扫