鼠标跟随移动

最新推荐文章于 2022-11-24 08:58:26 发布

失う.

最新推荐文章于 2022-11-24 08:58:26 发布

阅读量165

点赞数

本文链接：https://blog.csdn.net/weixin_49346957/article/details/108861998

版权

CSS JavaScript 鼠标事件绝对定位滚动条

关键词由CSDN通过智能技术生成

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">
		//获取div
		var odiv=document.getElementsByTagName('div')[0];
		// 也可以用这个  var odiv=document.querySelector('div')
		window.onmousemove=function(e){
			//获取滚动条的高度
			var h=document.documentElement.scrollTop||document.body.scrollTop;
			//event的兼容写法
			var e=e||window.event;
			//clientX  获取鼠标在文档中X坐标
			// offsetWidth  获取父元素的宽度
			// odiv.offsetWidth/2 是为了让鼠标在div中间显示
//			l 是div在可视区域X轴上距左的距离
			var l=e.clientX-odiv.offsetWidth/2;
			//clientY  获取鼠标在文档中Y坐标
			//offsetHeight  获取父元素的高度
//			t 是div在可视区域Y轴上距上的距离
			var t=e.clientY-odiv.offsetHeight/2;
			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+h+'px';
			
		}
	</script>

失う.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标跟随移动

css部分<style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: red; /* 元素必须定位 */ position: absolute; }</style>主题结构 <body style="
复制链接

扫一扫