开发者问题收集

从 CDN 加载 - 未捕获的 ReferenceError:未定义granularityJS

2021-08-10
951

我试图在我的页面上实现粒子。

在下面找到我的示例:

657378305

任何建议为什么我会得到错误 未介绍的参考:未定义 。我删除了标签 defer ,并通过 domcontentloaded

我非常感谢您的答复!

2个回答

您链接到的文件的源代码以 var Particles=function ... 开头。看起来要使用的变量名称是 Particles.load(... ,而不是 particlesJS.load(... 。这很奇怪,因为 文档 说的是 particlesJS.load(...

Jeremy Thille
2021-08-10

请参阅 托管 / CDN - ParticleJS

正确的 CDN 链接是 https://cdn.jsdelivr.net/npm/ [email protected] /particles.min.js

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<div id="particles-js"></div>

<main class="container pt-3">
  <div class="row justify-content-center mt-5">
    <div class="col-6">
      <div class="input-group mb-3 ">
        <input type="text" class="form-control" placeholder="Enter Your Best Email" aria-label="Recipient's username" aria-describedby="button-addon2">
        <button class="btn btn-warning" type="button" id="button-addon2">Button</button>
      </div>
    </div>
  </div>
</main>
<!-- /.container -->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

<!-- Custom JF classes -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
    particlesJS.load('particles-js', {
      "particles": {
        "number": {
          "value": 80,
          "density": {
            "enable": true,
            "value_area": 800
          }
        },
        "color": {
          "value": "#000000"
        },
        "shape": {
          "type": "circle",
          "stroke": {
            "width": 0,
            "color": "#000000"
          },
          "polygon": {
            "nb_sides": 5
          },
          "image": {
            "src": "img/github.svg",
            "width": 100,
            "height": 100
          }
        },
        "opacity": {
          "value": 0.5,
          "random": false,
          "anim": {
            "enable": false,
            "speed": 1,
            "opacity_min": 0.1,
            "sync": false
          }
        },
        "size": {
          "value": 3,
          "random": true,
          "anim": {
            "enable": false,
            "speed": 40,
            "size_min": 0.1,
            "sync": false
          }
        },
        "line_linked": {
          "enable": true,
          "distance": 150,
          "color": "#000000",
          "opacity": 0.4,
          "width": 1
        },
        "move": {
          "enable": true,
          "speed": 6,
          "direction": "none",
          "random": false,
          "straight": false,
          "out_mode": "out",
          "bounce": false,
          "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": 40,
            "duration": 2,
            "opacity": 8,
            "speed": 3
          },
          "repulse": {
            "distance": 200,
            "duration": 0.4
          },
          "push": {
            "particles_nb": 4
          },
          "remove": {
            "particles_nb": 2
          }
        }
      },
      "retina_detect": true
    }, function() {
      console.log('callback - particles.js config loaded');
    });
  });
</script>
</body>

</html>
Spectric
2021-08-10