<!doctype html><html><head><meta charset="utf-8"><title>原生JS实现图片爆炸特效</title><style type="text/css">* {margin: 0;padding: 0;list-style: none;}#boom {width: 500px;height: 333px;position: absolute;left: 50%;top: 50%;margin: -200px 0 0 -320px;border: 1px solid black;}#boom_node {width: 100%;height: 100%;position: absolute;}#boom_node>div {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}</style></head><body><div id='boom'><div id='boom_node'></div></div><script type="text/javascript">var index = 0;var zIndex = 9999999; //元素的堆叠999999//本地图片路径var arr = ['img/01.webp', 'img/05.webp', 'img/06.webp'];var imgIndex = 0;function random(min, max) {return parseInt(min + Math.random() * (max - min));}show(10, 8);function show(x, y) {var R = x;//10var T = y;//8//爆炸前生成下一张图片var oDiv2 = document.createElement('div');oDiv2.id = 'l' + index;oDiv2.style.zIndex = zIndex;//让下一张图片位于爆炸图之下zIndex--;index++;//如果三张不同的图片切换完，切换到第一张if (imgIndex == arr.length) {imgIndex = 0};boom_node.appendChild(oDiv2);//按数量生成小格子for (var i = 0; i < T; i++) {for (var j = 0; j < R; j++) {// 创建一个divvar oDiv = document.createElement('div');//给小格子生成宽高oDiv.style.width = boom_node.offsetWidth / R + 'px';oDiv.style.height = boom_node.offsetHeight / T + 'px';//浮动生成大的divoDiv.style.float = 'left';//背景及背景定位oDiv.style.background = 'url(' + arr[imgIndex] + ')';oDiv.style.backgroundPositionX = -j * (boom_node.offsetWidth / R) + 'px';oDiv.style.backgroundPositionY = -i * (boom_node.offsetHeight / T) + 'px';//随机延迟过渡 全部样式 0.2秒 缓动缓动oDiv.style.transition = (1.3 + Math.random() * 0.5) + 's all ease ' +(0.1 + Math.random() * 0.16) + 's';document.getElementById('l' + (index - 1)).appendChild(oDiv);}};//切换到下一张imgIndex++;//2秒后图片爆炸及消失setTimeout(function () {var allDiv = document.getElementById('l' + (index - 1)).children;for (var i = 0; i < allDiv.length; i++) {//爆炸 距视图的距离 横坐标 角度allDiv[i].style.transform = 'perspective(800px) rotateX(' + random(-190, 191) + 'deg) rotateY(' + random(-190, 191) + 'deg) scale(' + (1.5 + Math.random() * 0.6) + ') translateX(' + random(-300, 301) + 'px) translateY(' + random(-300, 301) + 'px) rotate(' + random(-190, 191) + 'deg)';//消失allDiv[i].style.opacity = 0;};//自调函数,让爆炸之前底部切换到下一张show(x, y);//清除爆炸后小div的占位setTimeout(function () {//底层ID为'l+(index+0)',未爆炸为'l+(index+1)',已爆炸为'l+(index+2)'boom_node.removeChild(document.getElementById('l' + (index - 2)))}, 1800);}, 2000);}</script></body></html>
如果觉得《js原生实现图片爆炸效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
