一组内容跟着鼠标移动

最新推荐文章于 2019-05-28 23:46:05 发布

爱笑萌娃

最新推荐文章于 2019-05-28 23:46:05 发布

阅读量208

点赞数

分类专栏： javaScript 文章标签：一组内容跟着鼠标移动

本文链接：https://blog.csdn.net/qq_43101321/article/details/83116727

版权

javaScript 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

下面代码主要实现，一组div跟着鼠标移动，形成队列式的跟随，样式很简单，可以自己设计，主要来说一下思路：第一个跟着鼠标动，后一个跟着前一个移动，就可以实现尾随的效果，具体来看一下js代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				position: absolute;
				width: 10px;
				height: 10px;
				background: red;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			//动态的创建10个div    ----->并添加到body中
			for(var i = 0; i < 10; i++){
				var oDiv = document.createElement("div");
				document.body.appendChild(oDiv);
			}
			//获取所有的div
			var aDiv = document.getElementsByTagName("div");
			//添加鼠标在页面的移动事件
			document.onmousemove = function(e){
				var evt = e || event;     //事件源
				var x = evt.clientX;       //获取鼠标距离可视区域的坐标
				var y = evt.clientY;
				//第一个跟着鼠标走
				aDiv[0].style.left = x + "px";
				aDiv[0].style.top = y + "px";
				//下一个跟着上一个走
				for(var i = aDiv.length - 1; i>=1; i--){
					aDiv[i].style.left = aDiv[i-1].style.left;
					aDiv[i].style.top = aDiv[i-1].style.top;
				}
			}
		</script>
	</body>
</html>

爱笑萌娃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一组内容跟着鼠标移动

下面代码主要实现，一组div跟着鼠标移动，形成队列式的跟随，样式很简单，可以自己设计，主要来说一下思路：第一个跟着鼠标动，后一个跟着前一个移动，就可以实现尾随的效果，具体来看一下js代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&am
复制链接

扫一扫

专栏目录