如何利用js实现萤火虫效果

最新推荐文章于 2024-08-12 09:41:22 发布

迩冬成

最新推荐文章于 2024-08-12 09:41:22 发布

阅读量627

点赞数 3

文章标签： js javascript css

本文链接：https://blog.csdn.net/lovle/article/details/105117515

版权

如何利用js实现萤火虫效果

前言

前端也学习一段时间了，但是没怎么派上用场这次给大家分享一个综合案例，用原生js做萤火虫效果

首先分析萤火虫需要的步骤

1.首先先上css和body部分

<style>
        body{background:url(image/bei.jpg) ;background-size:cover }
        div{width: 100px;height: 100px;background:url(image/1.jpg);position: absolute;
            background-size:cover}
    </style>
</head>
<body>
    
</body>

因为萤火虫需要随机位置出现，和随机个数，所以在body里面我们先不用创建，在js部分中，我们先做一个随机数的函数封装，然后获取需要的dom然后创建生成div，随机生成位置随机数函数

2.1随机数函数

    function random(a,b){
        return Math.round(Math.random()*(a-b)+b)
    }

2.3获取dom和生成随机坐标

class FireFly{
        constructor(){
            this.clientW = document.documentElement.clientWidth;
            //获取body的整个可见宽度，这样可以在这个宽度里随机
            this.clientH = document.documentElement.clientHeight;
                //获取body的整个可见高度，这样可以在这个高度中随机
        }
        
        random(){
            this.x = random(0,this.clientW)-20;
            //x坐标随机0到屏幕的宽度减去自身的宽度
            this.y = random(0,this.clientH)-20;
        }

    }
    function random(a,b){
        return Math.round(Math.random()*(a-b)+b)
    }

2.3创建生成div

class FireFly{
        constructor(){
             this.clientW = document.documentElement.clientWidth;
            //获取body的整个可见宽度，这样可以在这个宽度里随机
            this.clientH = document.documentElement.clientHeight;
                //获取body的整个可见高度，这样可以在这个高度中随机
        }
        createEle(){
            var div = document.createElement("div");
            //创建一个div
            document.body.appendChild(div);
            //body中添加我们创建的div
            div.style.left = this.x + "px";
            //这个div的x坐标是我们random函数中获取的坐标
            div.style.top = this.y + "px";
            this.move(div)
        }
        random(){
            this.x = random(0,this.clientW)-20;
            //x坐标随机0到屏幕的宽度减去自身的宽度
            this.y = random(0,this.clientH)-20;
        }
       

    }

3.我们就可以先创建出这个实例

for(var i =0; i<30; i++){//假设有30只萤火虫
    var p  = new FireFly();
    p.random()//一定要先调用，先产生随机数，不然无法计算div的偏移量
    p.createEle()//创建
}

4.最后就是带入我们封装的move缓冲运动函数

class FireFly{
        constructor(){
             this.clientW = document.documentElement.clientWidth;
            //获取body的整个可见宽度，这样可以在这个宽度里随机
            this.clientH = document.documentElement.clientHeight;
                //获取body的整个可见高度，这样可以在这个高度中随机
        }
        createEle(){
            var div = document.createElement("div");
            //创建一个div
            document.body.appendChild(div);
            //body中添加我们创建的div
            div.style.left = this.x + "px";
            //这个div的x坐标是我们random函数中获取的坐标
            div.style.top = this.y + "px";
            this.move(div)
        }
        random(){
            this.x = random(0,this.clientW)-20;
            //x坐标随机0到屏幕的宽度减去自身的宽度
            this.y = random(0,this.clientH)-20;
        }
        move(ele){
            this.random();  //随机数获取坐标
            move(ele,{
                left:this.x,
                top:this.y,
            },()=>{
                this.move(ele);
            })
    }
        function random(a,b){
        return Math.round(Math.random()*(a-b)+b)
    }

整体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{background:url(image/bei.jpg) ;background-size:cover }
        div{width: 100px;height: 100px;background:url(image/1.jpg);position: absolute;
            background-size:cover}
    </style>
</head>
<body>
    
</body>
<script src="move.2.0.js"></script>
<script>
    class FireFly{
        constructor(){
            this.clientW = document.documentElement.clientWidth;
            this.clientH = document.documentElement.clientHeight;
                
        }
        createEle(){
            var div = document.createElement("div");
            document.body.appendChild(div);
            div.style.left = this.x + "px";
            div.style.top = this.y + "px";
            this.move(div)
        }
        random(){
            this.x = random(0,this.clientW)-20;
            this.y = random(0,this.clientH)-20;
        }
        move(ele){
            this.random();  
            move(ele,{
                left:this.x,
                top:this.y,
            },()=>{
                this.move(ele);
            })
        } 

    }
console.log(random(1,10));

    function random(a,b){
        return Math.round(Math.random()*(a-b)+b)
    }
for(var i =0; i<30; i++){
    var p  = new FireFly();
    p.random()
    p.createEle()
}

</script>
</html>