js实现烟花效果

最新推荐文章于 2024-05-07 04:54:09 发布

Zzexi

最新推荐文章于 2024-05-07 04:54:09 发布

阅读量1.1k

点赞数 1

分类专栏： js 文章标签： js实现烟花效果

本文链接：https://blog.csdn.net/Zzexi/article/details/100667855

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#container{
			width: 80%;
			height: 600px;
			border: 2px solid red;
			background: #000;
			margin:20px auto;
			cursor: pointer;
			position: relative;
			left: 0;
			top: 0;
			overflow: hidden;
		}
		.fire{
			width: 10px;
			height:10px;
			position: absolute;
			bottom: 0;
		}
		.small-fire{
			width: 10px;
			height:10px;
			position: absolute;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div id="container"></div>
</body>
<script src="../move.js"></script>
<script>

	function Fire(options){
		this.x = options.x;
		this.y = options.y;
		this.cont = options.parent;

		// 1.创建主体烟花，设置样式，位置
		this.init()
	}
	Fire.prototype.init = function(){
		// 主体烟花，设置样式，位置
		this.ele = document.createElement("div");
		this.ele.className = "fire";
		this.ele.style.left = this.x + "px";
		this.ele.style.background = randomColor();
		this.cont.appendChild(this.ele)

		// 2.开始运动，运动结束
		this.animate()
	}
	Fire.prototype.animate = function(){
		// 开始运动。。。
		move(this.ele,{
			top:this.y
		},function(){
			// 删除主体烟花
			this.ele.remove()
			// 3.创建小烟花
			this.createSmall()
		}.bind(this))
	}
	Fire.prototype.createSmall = function(){
		// 创建小烟花,运动，删掉
		var num = random(10,20);

		// 1.随机的半径
		var r = random(100,200);
		console.log(num)
		for(var i=0;i<num;i++){
			let div = document.createElement("div");
			div.className = "small-fire";
			div.style.background = randomColor();
			div.style.left = this.x + "px";
			div.style.top = this.y + "px";
			div.setAttribute("i",i);
			this.cont.appendChild(div);

			// 2.利用三角函数，计算出一个圆上面平均分布的点的坐标
			// 注意三角函数的方法接收的是弧度：别忘记角度转弧度
			var l = parseInt(Math.cos( Math.PI/180 * (360/num * i)) * r) + this.x;
			var t = parseInt(Math.sin( Math.PI/180 * (360/num * i)) * r) + this.y;

			move(div,{
				left:l,
				top:t
			},function(){
				div.remove()
			})
			
		}
	}

// 范围随机数
function random(max,min){
    return Math.round(Math.random()*(max-min)+min);
}

// 随机颜色
function randomColor(){
    return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
}

	var ocont = document.getElementById("container");
	ocont.onclick = function(eve){
		var e = eve || window.event;
		new Fire({
			x:e.offsetX,
			y:e.offsetY,
			parent:this
		});
	}

</script>
</html>

//移动事件
function move(ele,json,callback){
    clearInterval(ele.t);
    ele.t = setInterval(() => {
        var onoff = true;
        for(var i in json){
            var iNow = parseInt(getStyle(ele,i));
            var speed = (json[i] - iNow)/6;
            speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
            if(iNow != json[i]){
                onoff = false;
            }
            ele.style[i] = iNow + speed + "px";
        }
        if(onoff){
            clearInterval(ele.t);
            callback && callback();
        }
    }, 30);
}
function getStyle(ele,attr){
    if(ele.currentStyle){
        return ele.currentStyle[attr];
    }else{
        return getComputedStyle(ele,false)[attr];
    }
}

Zzexi

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现烟花效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #container{ width: 80%; height: 600px; border: 2p...
复制链接

扫一扫

专栏目录