圆形烟花的一个js动画

最新推荐文章于 2024-06-21 16:41:46 发布

yansikai

最新推荐文章于 2024-06-21 16:41:46 发布

阅读量169

点赞数

分类专栏：圆形烟花的一个js动画文章标签： javascript

本文链接：https://blog.csdn.net/yansikai/article/details/103554784

版权

圆形烟花的一个js动画专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #cont{width:1000px;
            height:600px;
            border:2px solid green;
            background:#000;
            margin:20px auto;
            position: relative;
            left:0;
            top:0;
            cursor: pointer;
            overflow:hidden;
            }
        .fire{
            width:30px;
            height:30px;
            position:absolute;
            bottom:0;
            border-radius: 50%;
        }
        .smallFire{
            width:30px;
            height:30px;
            position:absolute;
            border-radius:50%;
        }
    </style>
</head>
<body>
    <div id="cont"></div>
</body>

<script>
    var ocont=document.querySelector("#cont")
    ocont.onclick=function(eve){
        var e=eve || window.event
        new Fire({
            cont:ocont,
            x:e.clientX-ocont.offsetLeft,
            y:e.clientY-ocont.offsetTop
        })
    }
    function Fire(options){
        this.cont=options.cont;
        this.x=options.x;
        this.y=options.y;
        this.init()
    }
    Fire.prototype.init=function(){
        this.f=document.createElement("div")
        this.f.className="fire"
        this.cont.appendChild(this.f)
        this.f.style.background=randomColor();
        this.x=this.x-this.f.offsetWidth/2;
        this.y=this.y-this.f.offsetHeight/2;
        this.f.style.left=this.x+"px";
        this.move()
    }
    Fire.prototype.move=function(){
        move(this.f,{top:this.y},()=>{
            this.f.remove()
            this.smallFire()
        })
    }
    Fire.prototype.smallFire=function(){
        var num=random(10,20);
        var r=random(100,200);
        for(var i=0;i<num;i++){
            let s=document.createElement("div")
            s.className="smallFire"
            this.cont.appendChild(s)
            s.style.background=randomColor();
            s.style.top=this.y+"px";
            s.style.left=this.x+"px";
            var target={
                x:parseInt(Math.cos(Math.PI/180*(360/num*i))*r)+this.x,
                y:parseInt(Math.sin(Math.PI/180*(360/num*i))*r)+this.y
            }
            move(s,{
                left:target.x,
                top:target.y
            },()=>{
                s.remove();
            })
        }
    }

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

    function randomColor(){
        return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`
    }


    function move(ele,data,end){
    clearInterval(ele.t);
    ele.t = setInterval(() => {
        var onoff = true;
        for(var i in data){
            var iNow = parseInt(getStyle(ele,i));
            var speed = (data[i] - iNow)/7;
            speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);

            (data[i] != iNow) && (onoff = false);
            ele.style[i] = iNow + speed + "px";
        }
        if(onoff){
            clearInterval(ele.t);
            end && end();
        }
    }, 30);
}
function getStyle(ele,attr){
    if(getComputedStyle){
        return getComputedStyle(ele,false)[attr];
    }else{
        return ele.currentStyle[attr];
    }
}
</script>
</html>

yansikai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圆形烟花的一个js动画

效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
复制链接

扫一扫