跟随鼠标光点练习

最新推荐文章于 2022-12-13 14:21:26 发布

Web企鹅

最新推荐文章于 2022-12-13 14:21:26 发布

阅读量390

点赞数 2

分类专栏： js CSS html5 文章标签： js html css

本文链接：https://blog.csdn.net/Web_blingbling/article/details/107859687

版权

js 同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

html5

24 篇文章 0 订阅

订阅专栏

CSS

21 篇文章 0 订阅

订阅专栏

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

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

思路

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

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

Web企鹅

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跟随鼠标光点练习

是一个简单的小练习，最后实现的效果如下：就是蓝色的点，跟着鼠标走，后面的也清除。思路最后的点先移到倒数第二的位置，倒数第二移到倒数第三的位置，以此类推…最后让第一个点，到达鼠标的位置；ps: 不要想着先挪第一个再挪第二个，那你第二个很可怜，都找不到第一个之前的位置…html 文件就是简单的设置了 20 个 div 标签：<!DOCTYPE html><html lang="en"><head> <meta charset="UT
复制链接

扫一扫