个人中心
gpt4 book ai didi

javascript - Particles.js Canvas 位于其他 Bootstrap 轮播幻灯片位置时不起作用

转载 作者：行者123 更新时间：2023-11-27 22:42:16 26 4
gpt4 key购买 nike

我正在使用 Bootstrap 轮播制作一个网站，其中应该包含一些动画 Canvas 。我想在第二张幻灯片上使用 Particles.js 动画，但它不起作用。它仅适用于第一张幻灯片，我不明白为什么。

有人可以帮助我吗？

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
    #myCarousel {
      height: 500px
    }
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
    }
    canvas {
      position: relative;
      /*pointer-events:none;*/
      top: 0;
      left: 0
    }
    /* Particles Canvas*/
    #particles-js{
      height: 500px;
      width: 100%;
      background-color: #D0EDF5;
      background-image: url('');
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: no-repeat;
    }
  </style>
</head>

<body>
  <div class="container">
    <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <h1>First Slide</h1>
        </div>
        <div class="item">
          <div id="particles-js"></div>
        </div>
        <div class="item">
          <h1>Third Slide</h1>
        </div>
      </div>
      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <script type="text/javascript">
    particlesJS('particles-js',

      {
        "particles": {
          "number": {
            "value": 60,
            "density": {
              "enable": true,
              "value_area": 800
            }
          },
          "color": {
            "value": "#0A8B80"
          },
          "shape": {
            "type": "circle",
            "stroke": {
              "width": 0,
              "color": "#000000"
            },
            "polygon": {
              "nb_sides": 5
            },
            "image": {
              "src": "img/github.svg",
              "width": 100,
              "height": 50
            }
          },
          "opacity": {
            "value": 0.5,
            "random": false,
            "anim": {
              "enable": false,
              "speed": 1,
              "opacity_min": 0.1,
              "sync": false
            }
          },
          "size": {
            "value": 20,
            "random": true,
            "anim": {
              "enable": false,
              "speed": 40,
              "size_min": 0.1,
              "sync": false
            }
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#65BBC4",
            "opacity": 0.4,
            "width": 2
          },
          "move": {
            "enable": true,
            "speed": 6,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "attract": {
              "enable": false,
              "rotateX": 600,
              "rotateY": 1200
            }
          }
        },
        "interactivity": {
          "detect_on": "canvas",
          "events": {
            "onhover": {
              "enable": true,
              "mode": "repulse"
            },
            "onclick": {
              "enable": true,
              "mode": "push"
            },
            "resize": true
          },
          "modes": {
            "grab": {
              "distance": 400,
              "line_linked": {
                "opacity": 1
              }
            },
            "bubble": {
              "distance": 400,
              "size": 80,
              "duration": 2,
              "opacity": 8,
              "speed": 3
            },
            "repulse": {
              "distance": 200
            },
            "push": {
              "particles_nb": 4
            },
            "remove": {
              "particles_nb": 2
            }
          }
        },
        "retina_detect": true,
        "config_demo": {
          "hide_card": false,
          "background_color": "#D0EDF5",
          "background_image": "",
          "background_position": "50% 50%",
          "background_repeat": "no-repeat",
          "background_size": "cover"
        }
      }
    );
  </script>
</body>

</html>

此外，我注意到打开浏览器的开发者控制台时动画就会开始，如下例所示:

Before

After

最佳答案

因为当 keywords.js 初始化时，它会读取 offsetHeight 和 offsetWidth 属性[1]，这些属性描述了可见区域的大小[2]。这可能是粒子.js的一个错误，但你可以捕获Bootstrap轮播的滑动事件，然后初始化粒子.js。

<小时/>

附加说明:

在滑动事件之后初始化 keywords.js 可确保当它发生时，目标元素已经可见，以便 keywords.js 可以获得有效的指标。

另一个解决方案是在每次幻灯片事件后触发调整大小事件。宽度和高度将被重新计算[3]。这也是为什么这个问题的作者可以通过打开开发者控制台来启动动画。

引用:

关于javascript - Particles.js Canvas 位于其他 Bootstrap 轮播幻灯片位置时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38654947/

26 4 0
文章推荐： c++ - 对象的 'this' 指针是否等于指向其(单个)基类的指针？
文章推荐： c++ - 了解类模板特化示例的隐式实例化
文章推荐： c++ - 未调用复制构造函数的虚拟辅助函数
文章推荐： c++ - RcppEigen 更快的协方差
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com