js 鼠标跟随事件

最新推荐文章于 2024-04-16 19:44:59 发布

ZZZ --- jh

最新推荐文章于 2024-04-16 19:44:59 发布

阅读量282

点赞数 2

分类专栏： JavaScript demo 文章标签： javascript

本文链接：https://blog.csdn.net/ZZZ___jh/article/details/109176501

版权

JavaScript 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

demo

19 篇文章 0 订阅

订阅专栏

js 鼠标跟随事件

css代码 :

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	div{
		width: 100px;
		height: 100px;
		background: red;
		position: absolute;	
	}
</style>

html代码 :

<body style="height: 3000px;">
	<!--把光标在可视区域的坐标位置赋值给div-->
	<div></div>
</body>

js代码 :

<script type="text/javascript">
	var odiv=document.querySelector('div');
	window.onmousemove=function(e){
		var h=document.documentElement.scrollTop||document.body.scrollTop;
		var e=e||window.event;
		var l=e.clientX-odiv.offsetWidth/2;
		//l 是div在可视区域X轴上距左的距离
		var t=e.clientY-odiv.offsetHeight/2;
		//t 是div在可视区域Y轴上距上的距离
		console.log(l+','+t)
		if(l<0){
			l=0
		}
		if(t<0){
			t=0;
		}
		//document.documentElement.clientWidth 是可视区域的宽
		//odiv.offsetWidth是div元素自身的宽
		//如果是div在可视区域X轴上距左的距离>可视区域的宽减去div元素自身的宽
		//就让div在可视区域X轴上距左的距离=可视区域的宽减去div元素自身的宽
		if(l>document.documentElement.clientWidth-odiv.offsetWidth){
			l=document.documentElement.clientWidth-odiv.offsetWidth;
		}
		if(t>document.documentElement.clientHeight-odiv.offsetHeight){
			t=document.documentElement.clientHeight-odiv.offsetHeight;
		}
		odiv.style.left=l+'px';
		odiv.style.top=t+'px';
	}
</script>

ZZZ --- jh

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 鼠标跟随事件

js 鼠标跟随事件css代码 :<style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: red; position: absolute; }</style>html代码 :<body style="height: 3000px;"> <!--把光标在可视区域的坐标位置赋值给div-
复制链接

扫一扫