还是接着昨天的基础版,今天写个圆周版,也就是圆的,也是在昨天的基础版上面稍作修改的
下面上代码:
还是老布局:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#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>
下面是js代码:move.js在昨天的基础版中找
<script src="../move.js"></script>
<script>
// 分析:
// 创建主体元素
// 设置样式,初始位置,拿到鼠标点击时传的坐标
// 向上运动,目标:鼠标的坐标
// 结束,删除主体元素
// 创建一批小元素,设置初始位置为鼠标点击的坐标
// 运动到随机目标,结束,删除所有
// 设计:
// class Fire{
// constructor(pos){
// // 接收参数,处理参数,定义属性
// }
// createFire(){
// // 创建主体元素
// // 设置位置
// // 设置样式
// // 开始运动
// this.fireMove();
// }
// fireMove(){
// // 开始运动
// move(主体烟花,属性和目标,()=>{
// // 删除主体烟花
// // 创建小烟花
// this.createSmall()
// })
// }
// createSmall(){
// // 创建小烟花
// // 设置初始位置
// // 设置样式
// // 开始运动
// this.smallMove();
// }
// smallMove(){
// move(小烟花,属性和目标,()=>{
// // 删除小烟花
// })
// }
// }
// var ocont = document.getElementById("container");
// ocont.onclick = function(){
// new Fire(坐标);
// }
// 编程
class Fire{
constructor(ops){
// 接收参数,处理参数,定义属性
this.cont = ops.cont;
this.x = ops.x;
this.y = ops.y;
this.createFire();
}
createFire(){
// 创建主体元素
this.ele = document.createElement("div");
// 设置样式
this.ele.className = "fire";
this.ele.style.background = randomColor();
// 设置位置
this.ele.style.left = this.x + "px";
this.cont.appendChild(this.ele);
// 开始运动
this.fireMove();
}
fireMove(){
// 开始运动
move(this.ele,{top:this.y},()=>{
// 删除主体烟花
this.ele.remove();
// 创建小烟花
this.createSmall()
})
}
createSmall(){
this.num = random(10,20);
this.r = random(100,200);
// 创建小烟花
for(var i=0;i<this.num;i++){
var small = document.createElement("div");
// 设置样式
small.className = "small-fire";
small.style.background = randomColor();
small.setAttribute("index",i);
// 设置初始位置
small.style.left = this.x + "px";
small.style.top = this.y + "px";
this.cont.appendChild(small);
// console.log(small);
// 开始运动
this.smallMove(small);
}
}
smallMove(ele){
// 随机目标
// 计算每个元素的角度
// 个数:10
// 圆:360
// 每两个元素之间间隔:360/10
// 第一个元素0:0度
// 第二个元素1:36度
// 第三个元素2:72度
// 。。。
var deg = 360/this.num * ele.getAttribute("index");
// console.log(deg);
// 根据每个元素的角度,计算在圆的某一点的坐标
var x = parseInt(Math.cos( Math.PI/180*deg ) * this.r + this.x);
var y = parseInt(Math.sin( Math.PI/180*deg ) * this.r + this.y);
// 开始运动
move(ele,{
left:x,
top:y
},()=>{
// 删除小烟花
ele.remove();
})
}
}
var ocont = document.getElementById("container");
ocont.onclick = function(eve){
var e = eve || window.event;
// 每次点击时,创建烟花对象,并传入当前点击的坐标和容器标签
new Fire({
cont:ocont,
y:e.clientY-ocont.offsetTop,
x:e.clientX-ocont.offsetLeft
});
}
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)})`;
}
</script>
</body>
</html>
下面来展示效果:
还有个最终版,明天更新,觉得好看的点个赞吧