<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#container{
width: 80%;
height: 600px;
border: 2px solid red;
background: #000;
margin:20px auto;
cursor: pointer;
position: relative;
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 type="text/javascript">
function Fire(ele,pos){
// 解析参数
this.x = pos.x;
this.y = pos.y;
this.cont = ele;
// 1.创建烟花元素
this.createFire();
}
Fire.prototype.createFire = function(){
// 创建并设置信息
this.f = document.createElement("div");
this.f.className = "fire";
this.f.style.left = this.x + "px";
this.f.style.background = randomColor();
this.cont.appendChild(this.f);
// 3.立即运动
this.fireMove()
}
Fire.prototype.fireMove = function(){
// 运动
move(this.f,{top:this.y},()=>{
// 4.到终点之后,消失,同时创建一堆小烟花
this.f.remove();
this.createSmall()
})
}
Fire.prototype.createSmall = function(){
// 创建并设置
// 随机个数
this.num = random(10,20);
// 圆周1:增加半径
this.r = random(100,200);
// 查看个数
console.log(this.num)
// 根据个数创建对应的元素
for(var i=0;i<this.num;i++){
// 因为for循环在重复执行,每次执行都会创建一个元素
// 等动画结束后,for循环已经执行结束,只保存下来了一个元素
// 需要配合ES6的let触发块级作用域,将每次for循环创建的div,都保存在运动的回调函数中
// 等运动结束后,回调函数才能找到每次的div,也就是每个小烟花
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 randomPos = {
x:Math.round(Math.cos( Math.PI / 180 * (360/this.num * i) ) * this.r) + this.x,
y:Math.round(Math.sin( Math.PI / 180 * (360/this.num * i) ) * this.r) + this.y
}
// 开始运动
move(div,{
left:randomPos.x,
top:randomPos.y
},function(){
div.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)})`
}
var ocont = document.getElementById("container");
ocont.onclick = function(eve){
var e = eve || window.event;
var pos = {
x:e.offsetX,
y:e.offsetY
}
new Fire(this,pos);
}
</script>
</html>
JS案例-烟花
猜你喜欢
转载自blog.csdn.net/weixin_44990056/article/details/99881171
今日推荐
周排行