个人理解：
分享今天刚做会图片爆炸效果，主要运用的知识内容便是
1.精灵图
2.for循环和if判断
3.js获取元素，js元素属性设置
4.setTimeout的应用
5.数组的应用 以及其它的知识
6.新手，如有不足，请见谅
步骤分享：
1.先定义能用到的变量，js获取所需要的元素
2.创建一个大的div，大div的里面分为很多小div，循环创建小的div
3.设置小的div背景为大的div背景的一小部分，即精灵图
4.设置小div的随机运动轨迹，随机运动时间，最后设置透明的为0
5.定义事件，设置时间，运行完成后清除残留div，重新开始函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.div1 {
width: 400px;
height: 400px;
margin-top: 100px;
border: 1px solid;
margin-left: 500px;
transform: translate();
position: relative;
}
.div1>div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.div1>div {
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
<script>
function ran(x, y) { //自定义函数ran 输出为[x，y)中的随机数 x可取，y不可取
return Math.random() * (y - x) + x
}
var arr = ["./1.jpg", "./2.jpg", "./3.webp", "./4.webp"] //图片路径定义为一个数组
var tp = 0; //定义小方块 数组arr[] 的取值
var tpl = 1 //定义 创建的大方块的 arr[]的取值
var t = 0;//定义大方块的 id名为 t
var z = 999//定义大方块的z-index轴的大小
var a = document.getElementsByClassName("div1")
var w = a[0].scrollWidth;
var h = a[0].scrollHeight;
function show(x, y) {
var b = document.createElement("div")
b.style.zIndex = z
z = z - 1
b.id = "div" + t
var di = "div" + t
a[0].appendChild(b)
b.style.backgroundImage = "url(" + arr[tpl] + ")"
tpl++
if (tpl == 4) {
tpl = 0
}
for (var i = 0; i < y; i++) {
for (var j = 0; j < x; j++) {
var c = document.createElement("div")
c.style.float = "left"
c.style.width = w / x + "px"
c.style.height = h / y + "px"
c.style.backgroundImage = "url(" + arr[tp] + ")"
c.style.transition = "all " + ran(2, 3) + "s ease"
c.style.backgroundSize = 100 * x + "%" + 100 * y + "%"
c.style.backgroundPositionX = -100 * j + "%"
c.style.backgroundPositionY = -100 * i + "%"
var d = document.getElementById(di)
d.appendChild(c)
}
}
t++
tp++
if (tp == 4) {
tp = 0
}
setTimeout(function () {
var ch = d.children
for (var q = 0; q < x * y; q++) {
ch[q].style.transform = "rotateX(" + ran(-180, 180) + "deg)" + "rotateY(" + ran(-180, 180) + "deg)" + " translateX(" + ran(-180, 180) + "px)" + " translateY(" + ran(-180, 180) + "px)"
ch[q].style.opacity = 0
}
setTimeout(function () {
var qcl = t - 1
var qcl2 = "div" + qcl
var qc = document.getElementById(qcl2)
a[0].removeChild(qc)
show(x, y)
}, 2000)
}, 1000)
}
show(10, 10)
</script>
</html>
