HTML实训之烟花效果

最新推荐文章于 2024-07-03 17:41:41 发布

柚咖

最新推荐文章于 2024-07-03 17:41:41 发布

阅读量960

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_40395874/article/details/95929134

版权

前端专栏收录该内容

32 篇文章 8 订阅

订阅专栏

在这里插入图片描述
编程过程中使用了"jquery-3.4.1.js这个js包

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html,
			body {
				overflow: hidden;
			}

			body,
			div,
			p {
				margin: 0;
				padding: 0;
			}

			body {
				background: #000;
				font: 12px/1.5 arial;
				color: #7A7A7A;
			}

			.fire {
				width: 3px;
				height: 3px;
				background: white;
				position: absolute;
			}

			.spark {
				position: absolute;
				width: 6px;
				height: 6px;
			}
			
			.ball {
				background: greenyellow;
				width: 50px; height: 50px;
				position: absolute;
				left :0; top: 300px;
			}
		</style>
		
	</head>
	<body>
		
	</body>
	
	
	<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		$(window).click(function(event){
			//获取鼠标单击位置
			new Fire(event.pageX,event.pageY);
		})
		
		class Fire {
			//需要创建一个烟花元素,并添加到页面上
			constructor(mousex, mousey) {
				this.mousex = mousex;
				this.mousey = mousey;
			    this.ele = $('<div class="fire"></div>');
				this.ele.appendTo("body");
				//修改它的位置
				this.ele.css({
					left: mousex + "px",
					top: $(window).height() + "px"
				})
				
				this.launch();
			}
			launch(){
				this.ele.animate({top: this.mousey}, 500, ()=>{
					//爆炸
					this.explode();
				})
			}
			explode(){
				this.ele.remove();
				//生成若干的彩色的烟花
				
				let count = Math.round(Math.random()*30 + 30); 
				// 30<=count*30+30<61
				// 30=<count<=60
				for(let i=0; i<count; i++){
					new Spark(this.mousex, this.mousey);
				}
			}
		}
		
		class Spark {
			constructor(x,y){
				//需要创建一个烟花元素,并添加到页面上
				this.ele = $('<div class="spark"></div>');
				this.ele.appendTo("body");
				
				//位置
				this.ele.css({
					left : x,
					top : y
				})
				
				//随机颜色
				this.ele.css({
					background: "rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")"
				})
				
				//随机的初始速度
				this.ele.speedx = Math.round(Math.random()*40) - 20;
				this.ele.speedy = Math.round(Math.random()*40) - 20;
				
				//抛物线
				this.parabola()
			}
			parabola(){
				let t = setInterval(()=>{
					this.ele.css({
						left: this.ele.offset().left + this.ele.speedx ,
						top: this.ele.offset().top + this.ele.speedy++
					})
					//当烟花落地时
					if(this.ele.offset().top >= $(window).height()) {
						//关闭定时器
						clearInterval(t);
						//删除烟花
						this.ele.remove();
					}
				}, 30)
			}
		}
	</script>
</html>