是一个简单的小练习,最后实现的效果如下:
就是蓝色的点,跟着鼠标走,后面的也清除。
思路
最后的点先移到倒数第二的位置,
倒数第二移到倒数第三的位置,
以此类推…
最后让第一个点,到达鼠标的位置;
ps: 不要想着先挪第一个再挪第二个,那你第二个很可怜,都找不到第一个之前的位置…
html 文件
就是简单的设置了 20 个 div 标签:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</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>
<script src="./src/script.js"></script>
</body>
</html>
css 文件
position: absolute;
很重要:将对象从文档流中拖出,使用 left,right,top,bottom 等属性进行绝对定位。
* {
margin: 0px;
padding: 0px;
}
div {
width: 10px;
height:10px;
border-radius: 50%;
background-color: blue;
position: absolute;
}
js 文件
window.onload = function() {
const arr = document.getElementsByTagName("div");
document.onmousemove = function(ev) {
let e = ev || window.event;
for(let i = arr.length - 1; i > 0; i--) {
arr[i].style.left = arr[i - 1].offsetLeft + "px";
arr[i].style.top = arr[i -1].offsetTop + "px";
}
arr[0].style.left = e.clientX + "px";
arr[0].style.top = e.clientY + "px";
}
}