跟随鼠标光点练习

是一个简单的小练习，最后实现的效果如下：
在这里插入图片描述

就是蓝色的点，跟着鼠标走，后面的也清除。

思路

最后的点先移到倒数第二的位置，
倒数第二移到倒数第三的位置，
以此类推…
最后让第一个点，到达鼠标的位置；

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";
    }
    
}

跟随鼠标 光点 练习

思路

html 文件

css 文件

js 文件

猜你喜欢

跟随鼠标光点练习