javascript鼠标跟随特效

最新推荐文章于 2024-07-23 16:20:42 发布

在白云寺外期待

最新推荐文章于 2024-07-23 16:20:42 发布

阅读量778

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lirunhui6/article/details/80059397

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
		</script>
	</head>
	<body>
		<div id="div1">鼠标跟随文字</div>
		<script>
			var div=document.getElementById("div1");
			
			document.οnmοusemοve=function(event)
			{
				pos(div,10,20,event);
			}
			
			function pos(o,x,y,event)
			{
				var posX=0; var posY=0;
				var e=event || window.event;//兼容IE浏览器
				if(e.pageX || e.pageY)//如果支持pageX或者pageY
				{
					posX=e.pageX;
					posY=e.pageY;
				}
				else if(e.clientX || e.clientY)
				{
					posX=e.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;
					posY=e.clientY+document.documentElement.scrollTop+document.body.scrollTop;
				}
				
				o.style.position="absolute";
				o.style.left=(posX+x)+"px";
				o.style.top=(posY+y)+"px";
			}
		</script>
	</body>
</html>