本文介绍了一个简单的HTML页面，该页面使用CSS样式和JavaScript代码创建了一组圆形元素，并实现了这些元素跟随鼠标移动的效果。通过设置绝对定位及监听鼠标移动事件，文章展示了如何让多个圆点在屏幕上跟随鼠标的当前位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 10px;
height: 10px;
background-color: lawngreen;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
var divs = document.getElementsByTagName("div");
// 一串跟着动，核心是onmousemove
document.onmousemove = function() {
// 先取得第一个div的left和top值，根据鼠标的坐标来确定
divs[0].style.left = event.clientX + "px";
divs[0].style.top = event.clientY + "px";
for (var i = divs.length - 1; i > 0; i--) {
divs[i].style.left = divs[i - 1].style.left;
divs[i].style.top = divs[i - 1].style.top;
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
</body>
</html>
扫一扫
1160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
