js实现炫酷的烟花效果 js实现炫酷的烟花效果

本文实例为大家分享了js实现炫酷的烟花效果的具体代码，供大家参考，具体内容如下
我们要理清整个流程的思路。
首先建立一块画布，用于展示烟花的效果，然后就要去思考烟花燃放的流程，我们都知道烟花通常都是先有一份飞上天，然后再分散成很多个小烟花，并且每一个小烟花都有不同的样式以及运动方式。
所有整体思路就是先建立一个div作为我们的大烟花，当大烟花运动到我们鼠标点击的位置的时候，大烟花就会消失，然后就会产生更多的小烟花，并且这些小烟花的运动轨迹样式各不相同。
1.建立一块画布（div）用于展示烟花的效果

/*给画布设置css样式*/#container {width: 80%; height: 600px; border: 1px red solid; position: relative; margin: 20px auto; cursor: pointer; background: black; }

2.获取节点

//获取节点 var app = document.getElementById('container'); //给app设置一个绑定事件app.onclick = function(event) {var e = event || window.event//获得鼠标点击的位置的坐标var pos = {cy: e.offsetY,cx: e.offsetX}new Fire(app, pos)}

烟花的实现过程：先实现一个大的div运动到鼠标点击的位置，然后在散开成为很多个div
3.先实现大烟花（需要调用随机数方法，随机颜色方法，以及运动函数）

// 构造函数function Fire(app, pos) {//把属性设置成变量this.app = app; this.pos = pos; //创建一个大的divthis.bf = document.createElement('div'); //设置一个类名this.bf.className = 'fire'; //设置样式this.bf.style.left = this.pos.cx + 'px'; this.bf.style.background = this.getColor(); this.app.appendChild(this.bf); //调用运动函数this.move(this.bf, {top: this.pos.cy}, () => {this.bf.remove(); this.smallFire(); })}

3.1首先先设置fire的样式
这是fire的初始样式

.fire {background: red; position: absolute; /* 设置bottom时,top获取为最大值,减去鼠标点击位置 */bottom: 0px; width: 6px; height: 6px; }

3.2设置一个随机数和随机颜色的方法（原型对象）

//获得一个随机数方法Fire.prototype.rand = function(min, max) {return Math.round(Math.random() * (max - min) + min); } //获得一个随机颜色的方法 Fire.prototype.getColor = function() {let sum = '#'; for (let i = 0; i < 6; i++) {sum += this.rand(0, 15).toString(16)}return sum; }

3.3封装一个运动函数（原型对象）

Fire.prototype.move = function(ele, target, cb) {// clearInterval(times); let times = setInterval(function() {// console.log(this); var onOff = true; // 遍历运动的方向和目标for (let attr in target) {// attr 表示运动的属性// console.log(attr); // 获取元素属性的实时值let tmpVal = parseInt(this.getPos(ele, attr))// 计算speed// console.log(tmpVal, attr); let speed = (target[attr] - tmpVal) / 10; // 取整speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 停止计时器,当一个属性运动到位置,设置开关状态if (tmpVal == target[attr]) onOff = true; // 让元素动起来ele.style[attr] = tmpVal + speed + 'px'; } // 判断开关状态,清除定时器for (var moveAttr in target) {// 如果不相等,就说明有属性没有运动到位置,定时器不能停止if (target[moveAttr] !== parseInt(this.getPos(ele, moveAttr))) {onOff = false; break; }}if (onOff) {clearInterval(times); cb && cb(); }// console.log(1111); }.bind(this), 30)}// 获取元素的实时位置的函数Fire.prototype.getPos = function(obj, attr) {if (obj.currentStyle) { // 获取css的样式return obj.currentStyle[attr]; } else {return getComputedStyle(obj)[attr]}}

通过以上几个步骤我们就可以得到大烟花的运动轨迹，大烟花运动到指定位置后就会消失，并且从消失的地方产生许多小烟花。由前面的分析可以知道，小烟花的运动轨迹和样式各不相同，接下来就是小烟花的实现
4.小烟花的实现
4.1设置samll-fire的样式
这是samll-fire的初始属性

.small-fire {width: 10px; height: 10px; position: absolute; border-radius: 50%; }

4.2设置小烟花的属性

//小烟花Fire.prototype.smallFire = function() {//首先我们设置小烟花的数量let num = this.rand(50, 60)//遍历给每一个小烟花设置不同的样式for (let i = 0; i < num; i++) {let sf = document.createElement('div'); sf.className = 'small-fire'; sf.style.left = this.pos.cx + 'px'; sf.style.top = this.pos.cy + 'px'; sf.style.background = this.getColor(); //console.log(sf); //追加到页面中this.app.appendChild(sf); //使小烟花的运动轨迹成圆周运动//var top = parseInt(Math.sin(Math.PI / 180 * 360 / num * i) * r) + this.pos.cy; //var left = parseInt(Math.cos(Math.PI / 180 * 360 / num * i) * r) + this.pos.cx; //给小烟花一个随机的位置，可以是在画布里面的任意一个位置let top = this.rand(0, this.app.offsetHeight - sf.offsetHeight); let left = this.rand(0, this.app.offsetWidth - sf.offsetWidth); //调用运动函数this.move(sf, {top: top,left: left}, function() {sf.remove(); })}}

【js实现炫酷的烟花效果】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。