话不多说,上代码:
CSS部分:
#sky{
width: 80%;
height: 500px;
background: #000;
margin:20px auto;
cursor: crosshair;
position: relative;
overflow: hidden;
}
.fire{
width: 10px;
height:10px;
position: absolute;
bottom: 0;
border-radius: 50%;
}
.small-fire{
width: 10px;
height:10px;
position: absolute;
border-radius: 50%;
}
HTML部分:
<div id="sky"></div>
JS部分:
class Fire{
constructor(pos){
this.cont = document.getElementById("sky");
this.x = pos.x;
this.y = pos.y;
}
create(){
// 创建元素设置样式和位置
this.f = document.createElement("div");
this.f.className = "fire";
this.f.style.background = randomColor();
this.cont.appendChild(this.f);
// 位置为鼠标点击的坐标的位置
this.f.style.left = this.x + "px";
// 初始信息设置完成后,开始运动
this.fireMove();
}
fireMove(){
// 调用了运动函数,传入要运动的元素,运动的属性和目标,结束后要做的事情
move(this.f,{
top:this.y
},()=>{
// 当主体烟花运动到目标后,删除主体烟花
this.f.remove();
// 准备创建小烟花:
// 设置总个数为随机数
var randomNum = random(10,20);
// 设置小烟花炸出来的圆的半径
var r = random(100,200);
// 根据个数,重复创建小烟花实例
for(var i=0;i<randomNum;i++){
// 创建实例时,需要将:以下信息都传到小烟花的实例中
var sf = new SmallFire({
cont:this.cont,
x:this.x,
y:this.y,
r:r,
sum:randomNum,
i:i
});
// 执行创建方法
sf.create();
}
});
}
}
class SmallFire{
constructor(obj){
// 接收并解析:大框,坐标,半径,个数,当前烟花的索引
this.cont = obj.cont;
this.x = obj.x;
this.y = obj.y;
this.r = obj.r;
this.sum = obj.sum;
this.i = obj.i;
}
create(){
// 创建小烟花的元素,设置位置,和样式
this.f = document.createElement("div");
this.f.className = "small-fire";
this.f.style.background = randomColor();
this.cont.appendChild(this.f);
this.f.style.left = this.x + "px";
this.f.style.top = this.y + "px";
// 小烟花开始运动
this.smallMove();
}
smallMove(){
move(this.f,{
left:parseInt(Math.cos( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.x,
top:parseInt(Math.sin( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.y
},()=>{
this.f.remove();
});
}
}
var ocont = document.getElementById("sky");
ocont.onclick = function(eve){
var e = eve || window.event;
// 获取坐标,准备给将来的烟花元素使用
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// 创建烟花元素,时,将坐标传进去,方便将来使用
var f = new Fire({
x:x,
y:y
});
// 执行创建烟花的方法
f.create();
}
// 封装随机数函数
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)})`;
}
效果如下:
当然了,要实现以上效果,离开了运动函数是肯定不可以的。
运动函数见:运动函数
------天行健,君子以自强不息。