<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
</script>
<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;
}
</style>
<script src="common.js"></script>
<script src="animate.js"></script>
<script>
window.onload = function() {
//每次点击 就在点击的位置 下方 创建 一个烟花对象
$(".container").onclick = function(event) {
var evt = event || window.event;
//console.log(evt.clientX);
var target = {
left: evt.clientX - this.offsetLeft,
top: evt.clientY - this.offsetTop
};
//创建烟花对象
new Fireworks(this, target);
}
}
//烟花构造函数
function Fireworks(obj, target) {
this.obj = obj;
//console.log(this);
//烟花运动的 目标值
this.target = target;
this.fire = document.createElement("div");
//初始化 创建烟花div设置类名和颜色，添加到contenter
this.init = function() {
this.fire.className = "fire";
this.fire.style.background = this.randomColor();
$(".container").appendChild(this.fire);
//控制div的坐标在 鼠标 的最下方，
this.fire.style.left = this.target.left + "px";
}
//烟花的移动方法
this.move = function() {
var _this = this;
animate(this.fire, { left: this.target.left, top: this.target.top }, function() {
//运动结束以后移除div
_this.obj.removeChild(_this.fire);
//调用爆炸方法，处理爆炸效果
_this.boom();
})
}
//爆炸效果
this.boom = function() {
console.log(‘爆炸‘)
//在目标位置擅长随机擅长20以内的div，并让他运动随机位置，擅长爆炸效果
for(let i = 0; i < Math.round(Math.random() * 10 + 10); i++) {
console.log(1);
var _this = this;
//在目标位置创建一个div
let fire = document.createElement("div");
fire.className = "fire";
fire.style.left = this.target.left + "px";
fire.style.top = this.target.top + "px";
fire.style.borderRadius = "50%";
this.obj.appendChild(fire);
fire.style.background = this.randomColor();
var target = {};
//在contenter内 产生随机坐标，让fire 运动该位置
target.left = Math.round(Math.random() * (this.obj.offsetWidth - 10));
target.top = Math.round(Math.random() * (this.obj.offsetHeight - 10));
animate(fire, target, function() {
//运动结束后移除
_this.obj.removeChild(fire);
});
}
}
this.randomColor = function() {
var r = Math.round(Math.random() * 255);
var g = Math.round(Math.random() * 255);
var b = Math.round(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
}
this.getStyle = function(obj, attr) {
//获取当前元素定位;
return {
left: getComputedStyle(obj)[attr],
top: getComputedStyle(obj)[attr]
}
}
//移动开始；
this.init();
this.move();
};
function $(select) {
return document.querySelector(select);
}
</script>
</head>
<body>
<div class="container">
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/team-bali/p/11415329.html