移动产生絮条

最新推荐文章于 2024-08-14 09:51:23 发布

冷羽飞寒

最新推荐文章于 2024-08-14 09:51:23 发布

阅读量78

点赞数 1

分类专栏： JavaScriptAPI案例文章标签： css 前端 html javascript

本文链接：https://blog.csdn.net/2201_75407865/article/details/128412918

版权

JavaScriptAPI案例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

涉及知识点

任何事件都有内置对象event，event代表时间状态。

兼容性： var event=event||window.event;

元素的坐标：

1、clientX、clientY：时间被触发时鼠标指针相对于浏览器页面的水平坐标以及垂直坐标

2、pageX、pageY：时间被触发时鼠标指针相对于文档边缘的水平坐标以及垂直坐标

（有滚动条时client不算滚动条的距离，page算滚动条的距离）

clientWidth：元素的宽度（不算border）clientHeight：元素的高度（不算border）

offsetWidth：元素的宽度（算border）offsetHeight：元素的高度（算border）

onmousemove：鼠标移动事件。

成品展示

一、效果展示

二、代码展示

1、基础框架

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

2、CSS样式

    * {
        margin: 0;
        padding: 0;
    }

    body {
        height: 100vh;
        background-color: #000;
        position: relative;
    }

    li {
        width: 50px;
        height: 50px;
        background-color: #f00;
        border-radius: 50%;
        position: absolute;
        list-style: none;
        display: none;
    }

3、JS代码

    function random(m,n) {
        return  Math.floor(Math.random()*(n-m+1)+m);
    }
    function color() {
        return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
    }

    document.onmousemove = function () {
        var list = document.querySelectorAll("li");
        var event = event || window.event;
        var num = 0;
        var time = setInterval(function () {
            list[num].style.display = "block";
            list[num].style.backgroundColor=color();
            list[num].style.left = event.clientX - list[0].offsetWidth / 2 + "px";
            list[num].style.top = event.clientY - list[0].offsetWidth / 2 + "px";
            num++;
            if (num >= list.length) {
                clearInterval(time);
            }
        }, 30)
    }