鼠标移入页面时，div跟随鼠标移动

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

King_960725

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

阅读量1.3k

点赞数

分类专栏： JS jQuery 文章标签： div的移动

本文链接：https://blog.csdn.net/weixin_42566993/article/details/98315862

版权

JS 同时被 2 个专栏收录

43 篇文章 1 订阅

订阅专栏

jQuery

9 篇文章 0 订阅

订阅专栏

关注我的Github获取更多笔记资料

要求：有下图这样一个div，当鼠标移入时，div跟随鼠标移动(兼容性也要处理)

在这里插入图片描述

使用原生JS和jQuery两种方法

原生JS方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>div的移动</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: coral;
			/*保证div能移动，一定要添加定位*/
			position: absolute;
			cursor: move;
		}
	</style>
	<script>
		window.onload = function(){
			var div = document.getElementById('box');
			//由于是在页面上移动div，对document文档绑定鼠标移动事件
			document.onmousemove = function(event){
				//处理火狐和谷歌对scroll滚动距离的兼容
				//谷歌支持通过body获取滚动条滚动的距离，而火狐支持通过html获取滚动条滚动的距离
				var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
				var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
				//IE8及以下不支持event
				var event = event || window.event;
				//IE浏览器不支持pageX,pageY
				var pageX = event.pageX || event.clientX + scrollLeft;
				var pageY = event.pageY || event.clientY + scrollTop;
				//让鼠标保持在div的正中间
				var targetX = pageX - div.offsetWidth/2;
				var targetY = pageY - div.offsetHeight/2;
				div.style.left = targetX + 'px';
				div.style.top = targetY + 'px';
			}
		}
	</script>
</head>
<!-- 为了测试滚动条，为body增加宽高 -->
<body style="width: 2000px;height: 2000px">
	<div id="box"></div>
</body>
</html>

测试：

谷歌浏览器：

显示成功，即使加了滚动条也能跟着鼠标移动。

火狐浏览器

火狐浏览器也兼容成功，移动鼠标div跟随移动。

IE8浏览器

IE浏览器也兼容！

jQuery方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>div移动</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: #00b894;
			position: absolute;
			cursor: move;
		}
	</style>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script>
		$(function(){
			$(document).mousemove(function(event){
				//$(this)就代表$(document)，处理谷歌和火狐对滚动的兼容
				var event = event || window.event;
				var pageX = event.pageX || event.clientX + $(this).scrollLeft();
				var pageY = event.pageY || event.clientY + $(this).scrollTop();
				var targetX = pageX - $("#box").width()/2;
				var targetY = pageY - $("#box").height()/2;
				//注意：这里不能通过$("#box").offset().left来设置，因为它只能获取，设置使用如下方法
				$("#box").css({
					left:targetX,
					top:targetY
				});
			});
		});
	</script>
</head>
<body style="width: 2000px;height: 2000px">
	<div id="box"></div>
</body>
</html>

测试：

谷歌

移动成功！！！

火狐

移动成功！！！

IE8浏览器

IE8竟然报了一大堆错误，查阅相关资料发现如果项目需要兼容IE低版本，需要使用jQuery1.x版本，从2.x开始已经不兼容IE6、7、8了。
当前我使用的是jQuery3.4.1版本的，于是我换成的jQuery1.12.4版本

	<script src="js/jquery-1.12.4.min.js"></script>

测试：
在这里插入图片描述
兼容成功！！！并且火狐，谷歌也是对jQuery兼容的。
我们要记住一个道理，兼容一般都是向下兼容的，既然高版本的兼容，那低版本的也是兼容的。

King_960725

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
鼠标移入页面时，div跟随鼠标移动

要求：有下图这样一个div，当鼠标移入时，div跟随鼠标移动(兼容性也要处理)
复制链接

扫一扫

专栏目录