原生JS实现图片爆炸特效
原生JS实现图片爆炸特效
越陌度阡
发布于 2020-11-26 15:49:27
发布于 2020-11-26 15:49:27
代码可运行
运行总次数：0
代码可运行
分享一个由原生JS实现的图片爆炸特效，效果如下：
实现的代码如下：
<!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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/07/28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
