图片碎片化 可支持操作和定时

图片碎片化 可支持操作和定时

burst() {
				var that = this;
				var ready = true;
				var img = document.querySelector('#container');
				var S = 1;
				var R = 4;
				var C = 7;
				var W = parseInt(window.getComputedStyle(img)['width']);
				var H = parseInt(window.getComputedStyle(img)['height']);
				var N = 2;
				var maxW = N * W;
				var maxH = N * H;
				var now = 0;
				var info = ['https://kkkk1000.com/images/ExplosionPictureSwitching/1.jpg',
					'https://kkkk1000.com/images/ExplosionPictureSwitching/2.jpg',
					'https://kkkk1000.com/images/ExplosionPictureSwitching/3.jpg',
				];
				img.style.background = 'url(' + that.info[0] + ') no-repeat';
				var next = function() {
					return (now + 1) % that.info.length;
				}
				// img.onmouseover = function() {
				// }
				setInterval(function(){
					that.shuipian(ready,now,img,R,C,W,H,maxW,maxH,S,next);
				},2000)
			},
			shuipian(ready,now,img,R,C,W,H,maxW,maxH,S,next){
				var that = this;
				// if (!ready) return;
				ready = false;
				var html = document.createDocumentFragment();
				if (that.now+1 == that.info.length) {
					img.style.background = 'url(' + that.info[0] + ') no-repeat';
				} else {
					img.style.background = 'url(' + that.info[1] + ') no-repeat';
				}
				var posArr = [];
				var k = 0;
				for (var i = 0; i < R; i++) {
					for (var j = 0; j < C; j++) {
						posArr[k] = {
							left: W * j / C,
							top: H * i / R,
							endLeft: maxW * j / C - (maxW - (maxW - W) / C - W) / 2,
							endTop: maxH * i / R - (maxH - (maxH - H) / R - H) / 2,
						};
						var debris = document.createElement("div");
						var url = that.info[that.now];
						debris.style.cssText =
							` position: absolute; width: ${Math.ceil(W / C)}px; height: ${Math.ceil(H / R)}px; background: url(${url}) -${posArr[k].left}px -${posArr[k].top}px no-repeat; left: ${posArr[k].left}px; top: ${posArr[k].top}px; opacity:1; transition:${that.randomNum(0.1, S)}s ease; `;
						html.appendChild(debris);
						k++;
					}
				}
				img.appendChild(html);
				var debrisAll = img.children;
				setTimeout(function() {
					for (var i = 0; i < debrisAll.length; i++) {
						var l = posArr[i].endLeft;
						var t = posArr[i].endTop;
						debrisAll[i].style.cssText +=
							` left : ${l}px; top : ${t}px; opacity :0; transform:perspective(500px) rotateX(${that.randomNum(-180, 180)}deg) rotateY(${that.randomNum(-180, 180)}deg) rotateZ(${that.randomNum(-180, 180)}deg) scale(${that.randomNum(1.5, 3)}); `;
					}
					setTimeout(function() {
						img.innerHTML = '';
						ready = true;
						// that.now = next();
						if(that.now+1 >= that.info.length){
							that.now = 0;
						}else{
							that.now = that.now + 1;
						}
					}, S * 1000);
				}, 100);
			},
				randomNum(n, m) {
					return Math.random() * (m - n) + n;
				},