这不明天就是520了！朋友非得让我宣传一下他，给了我几张照片。可惜我也不会什么PS，干脆直接用JS爆炸渲染一下吧！

只有几张照片也挺枯涩的，我决定加了一首歌的部分片段

<audio  src="aaa.mp3" autoplay="autoplay" ></audio>

效果如下：

刚刚发现上传视频不支持本地，所以只能先这样了展示了。

实现的代码如下

首先写个函数，实现boom类的定义：

function boom(opt){
	this.opt = opt;
	this.index = 99999;
	this.imgLeg = 0;

	//生成元素的模块
	this.createNode();

	//爆炸模块
	this.chartBoom();
};

为类添加以下方法：

添加方法creatNode

'createNode':function(){
		//this.needRandomTimer = this.opt.timer.split('-');
		//console.log(this.needRandomTimer);
		//console.log()
		this.imgLeg == this.opt.imgUrl.length && (this.imgLeg = 0);

		this.newDiv = document.createElement('div');

		this.newDiv.style.cssText ='width:100%;height:100%;position:absolute;';
		this.newDiv.style.zIndex=this.index;
		this.index--;
		for(var i = 0;i < this.opt.y;i++){
			for(var j = 0;j < this.opt.x;j++){
				this.smallDiv = document.createElement('div');

				this.smallDiv.style.width = this.opt.obj.clientWidth / this.opt.x + 'px';
				this.smallDiv.style.height = this.opt.obj.clientHeight / this.opt.y + 'px';
				this.smallDiv.style.float = 'left';
				this.smallDiv.style.background = 'url('+this.opt.imgUrl[this.imgLeg]+')';
				this.smallDiv.style.backgroundPositionX = this.opt.obj.clientWidth / this.opt.x * -j+'px';
				this.smallDiv.style.backgroundPositionY = this.opt.obj.clientHeight / this.opt.y * -i+'px';
				this.smallDiv.style.transition = this.random(Number(this.opt.timer.split('-')[0]),Number(this.opt.timer.split('-')[1]))+'s all ease';
				this.newDiv.appendChild(this.smallDiv);
			};
		};
		this.imgLeg++;
		this.opt.obj.appendChild(this.newDiv);
	}

添加returnArr方法

'returnArr':function(){
		this.str='';
		for(var i =0;i <this.opt.style.length;i++ ){
			//this.str='';
			this.str+= ' '+this.opt.style[i].split(':')[0]+'(';
			this.str+= this.random(Number(this.opt.style[i].split(':')[1].split('*')[0]),Number(this.opt.style[i].split(':')[1].split('*')[1]));
			this.str+= this.opt.style[i].split(':')[2] +')';
			
		};
		this.str = this.str.replace('undefined','');
		return this.str;
		//this.arr.push(this.str);
	}

添加chartBoom方法

'chartBoom':function(){
		var _this = this;

		setTimeout(function(){
			for(var i = 0;i<_this.newDiv.children.length;i++){
				console.log(_this.returnArr())
				_this.newDiv.children[i].style.transform = _this.returnArr();
				_this.newDiv.children[i].style.opacity = 0;
			};


			_this.createNode();
			_this.chartBoom();
			
		},1000);

		setTimeout(function(){
			boomNode.children[0].remove();

		},Number((this.opt.timer.split('-')[1])*1000)+1000)

	}

上面这些添加的类可以利用prototype来封装一下。

实例调用：

new boom({
	'obj':boomNode,
	'x':10,
	'y':8,
	'timer':'0.8-1.7',
	'imgUrl':['1.jpg','2.jpg','3.jpg','4.jpg'],
	'style':['perspective:800*800:px','translateX:-500*500:px','translateY:-500*500:px','rotate:-180*180:deg','rotateX:-180*180:deg','rotateY:-180*180:deg','scale:1*3:']
	//rotate(37deg) rotateX(69deg)
})

最后顺便说一句，上面的照片有点假，若有侵权，必删！！！