js 跟随鼠标的小球

鼠标轨迹小球特效

最新推荐文章于 2022-11-19 11:49:11 发布

原创最新推荐文章于 2022-11-19 11:49:11 发布 · 499 阅读

3 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            top:0;
            left: 0;
        }
    </style>
    <script>
        window.onload=function () {
            var balls=[];
            function creatBalls() {
                for(var i=0;i<60;i++){

                    var ball=document.createElement('p');
                    ball.style.backgroundColor=randomColor();
                    document.body.appendChild(ball);
                    balls.push(ball);
                }
            }
            creatBalls();
            function randomColor() {
                return 'rgb('+randomNum(0,255)+','+ randomNum(0,255)+','+randomNum(0,255)+')';
            }
            function randomNum(n,m) {
                return Math.floor(Math.random()*(m-n+1)+n);
            }
            document.onmousemove=function (e) {
                var oEvent=e||window.event;
                for(var i=balls.length-1;i>0;i--){

                    balls[i].style.top=balls[i-1].style.top;
                    balls[i].style.left=balls[i-1].style.left;
                }
                balls[0].style.left=oEvent.clientX+'px';
                balls[0].style.top=oEvent.clientY+'px';
            }
        }
    </script>
</head>
<body>

</body>
</html>

在实践中遇到的问题：

1.数组中的小球坐标应从数组尾开始，复制前一个小球的坐标；