原生JS实现萤火虫效果

最新推荐文章于 2022-12-28 13:42:58 发布

原创最新推荐文章于 2022-12-28 13:42:58 发布 · 384 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细介绍了一种使用HTML、CSS和JavaScript实现萤火虫在网页上随机飘动的动画效果的方法。通过创建多个div元素并为其应用特定的样式和位置，结合随机生成的位置和动态运动函数，实现了萤火虫在屏幕上的自然飘动。

css部分：

<style>
    .box{width: 4px;height: 5px;background: wheat;position: absolute;border-radius: 50%;}
    body{background: url(../img/bg.jpg);}
</style>

JS部分：

<script>
class Glowworm{
    constructor(){
        // 获取屏幕的可视区域的宽高，用作将来的随机范围
        this.clientW = document.documentElement.clientWidth;
        this.clientH = document.documentElement.clientHeight;
        // 假设萤火虫的宽高
        this.w = 20;
        this.h = 20;
    }
    createEle(){
        var div = document.createElement("div");
        div.className = "box";
        document.body.appendChild(div);
        // 在创建元素之前一定得先生成随机坐标
        div.style.left = this.x + "px";
        div.style.top = this.y + "px";
        // 元素创建好之后，立即运动
        this.move(div);
    }
    randomPos(){
        // 随机生成坐标
        this.x = random(0,this.clientW - this.w);
        this.y = random(0,this.clientH - this.h);
    }
    move(ele){
        // 开始运动之前，还得随机生成目标
        this.randomPos();
        // 开始运动
        move(ele,{
            left:this.x,
            top:this.y
        },()=>{
            // 一个动画结束后，重复开启当前动画，即可
            this.move(ele);
        })
    }
}

for(var i=0;i<60;i++){
    // 先得到实例
    var g = new Glowworm();
    // 生成随机坐标
    g.randomPos();
    // 再创建元素
    g.createEle();
}

function random(a,b){
    return Math.round(Math.random()*(a-b)+b);
}
</script>