分享一个由原生JS实现的图片爆炸特效，效果如下：
实现的代码如下：
代码语言：javascript复制<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生JS实现图片爆炸特效</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#boom {
width: 640px;
height: 400px;
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;
//本地图片路径
var arr = ['images/0.jpg', 'images/1.jpg', 'images/2.jpg'];
var imgIndex = 0;
function random(min, max) {
return parseInt(min Math.random() * (max - min));
}
show(10, 8);
function show(x, y) {
var R = x;
var T = y;
//爆炸前生成下一张图片
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 ) {
var oDiv = document.createElement('div');
//给小格子生成宽高
oDiv.style.width = boom_node.offsetWidth / R 'px';
oDiv.style.height = boom_node.offsetHeight / T 'px';
//浮动生成大的div
oDiv.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';
//随机延迟过渡
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>
