js原生实现图片爆炸效果

清酒独酌

于 2021-12-16 10:14:39 发布

阅读量503

点赞数

分类专栏： javascript 文章标签： javascript css html 前端 css3

本文链接：https://blog.csdn.net/yang68668/article/details/121968444

版权

javascript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

<!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;//10
      var 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++) {
          // 创建一个div
          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';
          //随机延迟过渡                                       全部样式 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>

清酒独酌

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
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: 50.
复制链接

扫一扫