原生JS实现图片爆炸特效

分享一个由原生JS实现的图片爆炸特效，效果如下：

实现的代码如下：

<!doctype html>
<html><head><meta charset="utf-8"><title>原生JS实现图片爆炸特效</title><style type="text/css">* {margin: 0;padding: 0;list-style: none;}#box {width: 640px;height: 400px;position: absolute;left: 50%;top: 50%;margin: -200px 0 0 -320px;border: 1px solid black;}#child {width: 100%;height: 100%;position: absolute;}#child>div {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}</style>
</head><body><div id='box'><div id='child'></div></div><script type="text/javascript">var index = 0;var zIndex = 9999999;// 本地图片路径var imgList = ['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 div = document.createElement('div');div.id = 'l' + index;div.style.zIndex = zIndex;// 让下一张图片位于爆作图之下zIndex--;index++;// 如果三张不同的图片切换完，切换到第一张if (imgIndex == imgList.length) {imgIndex = 0};child.appendChild(div);// 按数量生成小格子for (var i = 0; i < y; i++) {for (var j = 0; j < x; j++) {var div = document.createElement('div');// 给小格子生成宽高div.style.width = child.offsetWidth / x + 'px';div.style.height = child.offsetHeight / y + 'px';// 浮动生成大的divdiv.style.float = 'left';// 背景及背景定位div.style.background = 'url(' + imgList[imgIndex] + ')';div.style.backgroundPositionX = -j * (child.offsetWidth / x) + 'px';div.style.backgroundPositionY = -i * (child.offsetHeight / y) + 'px';// 随机延迟过渡div.style.transition = (1.3 + Math.random() * 0.5) + 's all ease ' +(0.1 + Math.random() * 0.16) + 's';document.getElementById('l' + (index - 1)).appendChild(div);}};// 切换到下一张imgIndex++;// 图片爆炸及消失setTimeout(function () {var divList = document.getElementById('l' + (index - 1)).children;for (var i = 0; i < divList.length; i++) {// 爆炸divList[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)';// 消失divList[i].style.opacity = 0;};// 自调函数,让爆炸之前底部切换到下一张show(x, y);// 清除爆炸后元素占位setTimeout(function () {// 底层ID为l+(index+0),未爆炸为l+(index+1),已爆炸为l+(index+2)child.removeChild(document.getElementById('l' + (index - 2)))}, 1800);}, 2000);}</script>
</body></html>

原生JS实现图片爆炸特效相关推荐

原生JS实现图片跑马灯特效
今天给大家分享一个用原生JS实现的图片跑马灯特效,效果如下: 实现的代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html><head><m ...
如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
原生JS实现图片滚动
2019独角兽企业重金招聘Python工程师标准>>> 原生JS实现图片滚动一.原理黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设 ...
十分钟教会你原生JS压缩图片，极其精简版
十分钟教会你原生JS压缩图片,极其精简版原文链接:https://blog.csdn.net/yasha97/article/details/83629510 (一)实现思路先通过input标签获 ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
原生JS实现球面展示特效
分享一个由原生JS实现的球面展示效果,效果如下: 实现代码如下: <!DOCTYPE html> <html><head><meta http-equiv=& ...
html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
手机端移动端的前端原生js裁剪图片上传
手机端移动端的前端原生js裁剪图片上传选择头像时裁剪上传,确保图片是个正方形,不会出现压扁拉伸的现象效果图原理很简单,其实就是用canvas截图出来而已,只是要对比例做一下处理. <!-- ...
原生JS实现飘浮关键词特效
分享一个原生JS实现的飘浮关键词的效果,鼠标悬停可让关键词停止运动,点击关键词可跳转到对应的页面,效果如下: 实现的代码如下: <!DOCTYPE html> <html>&l ...
如何用原生JS制作图片时钟
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士今天分享一个小demo,如何用原生JS制作图片时钟,话不多说上代码. html[外链图片转存失败(img-mD0n42FM-156223 ...

原生JS实现图片爆炸特效

原生JS实现图片爆炸特效相关推荐

最新文章

热门文章