无法添加particles.js
[英]unnable to add particles.js
问题描述
我在我的网站上实现particles.js时遇到问题。 我收到错误：未捕获ReferenceError：未定义particlesJS。 我从下载站点尝试了该演示，在那里可以正常工作，然后从那里复制了代码，但站点上没有任何内容。
/* ----------------------------------------------- /* How to use? : Check the GitHub README /* ----------------------------------------------- */ /* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */ particlesJS.load('particles-js', 'particles.json', function() { console.log('particles.js loaded - callback'); }); /* Otherwise just put the config content (json): */ particlesJS('particles-js', { "particles": { "number": { "value": 100, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "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": 5, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1 }, "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": 40, "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": "#b61924", "background_image": "", "background_position": "50% 50%", "background_repeat": "no-repeat", "background_size": "cover" } } );
#stats{ border-radius: 3px 3px 0 0; overflow: hidden; } #particles-js{ width: 100%; height: 100%; background-color: blue; background-image: url(''); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Custom CSS --> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/progress.css"> <link rel="stylesheet" href="css/particles.css"> </head> <body> <nav class="navbar navbar-light bg-faded navbar-fixed-top"> <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar1"> ☰ </button> <a class="navbar-brand" href="#">MS</a> <div class="collapse navbar-toggleable-xs" id="navbar1"> <ul class="nav navbar-nav pull-xs-right"> <li class="nav-item active"> <a class="nav-link" href="#stage">Home <span class="sr-only">(current)</span></a> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> </ul> </div> </nav> <!-- PARTICLES--> <div id="particles-js"></div> <div id="stage"> <div id="stage-caption"> <h1 class="display-3 fadeInDown animated "> THERE'S ONLY ONE MIHAEL SOBOČAN, WEB DESIGNER & PROGRAMMER!</h1> <p class="fadeInUp animated"> WHEN YOU NEED RESULTS </p> </div> </div> <section id="about"> <div class="container"> <div class="row"> <div class="section-content"> <div class="col-lg-6"> <div class="about-text"> <h3>About Me</h3> <p class="lead"> Hello, my name is Mihael Sobočan, i am a web designer & front-end web developer. My job is to build your website so that it is functional and user-friendly but at the same time attractive. </p> <p>I love everything about the web, except Internet Explorer. I love creating new things with HTML5, CSS3, PHP and Javascript.</p> </div> </div> </div> <div class="section-contenta"> <div class="col-lg-5 col-lg-offset-1"> <div class="skills"> <p class="blured">My Skills</p> <div class="skillbar clearfix " data-percent="65%"> <div class="skillbar-title" style="background: #d35400;"><span> <p class="blur">HTML</p></span></div> <div class="skillbar-bar" style="background: #e67e22;"></div> <div class="skill-bar-percent">65%</div> </div> <!-- End Skill Bar --> <div class="skillbar clearfix " data-percent="70%"> <div class="skillbar-title" style="background: #2980b9;"><span> <p class="blur">CSS</p></span></div> <div class="skillbar-bar" style="background: #3498db;"></div> <div class="skill-bar-percent">70%</div> </div> <!-- End Skill Bar --> <div class="skillbar clearfix " data-percent="55%"> <div class="skillbar-title" style="background: #2c3e50;"><span> <p class="blur">JAVA</p></span></div> <div class="skillbar-bar" style="background: #2c3e50;"></div> <div class="skill-bar-percent">55%</div> </div> <!-- End Skill Bar --> <div class="skillbar clearfix " data-percent="40%"> <div class="skillbar-title" style="background: #46465e;"><span> <p class="blur">C++</p></span></div> <div class="skillbar-bar" style="background: #5a68a5;"></div> <div class="skill-bar-percent">40%</div> </div> <!-- End Skill Bar --> <div class="skillbar clearfix " data-percent="70%"> <div class="skillbar-title" style="background: #333333;"><span> <p class="blur">BOOTSTRAP</p></span></div> <div class="skillbar-bar" style="background: #525252;"></div> <div class="skill-bar-percent">70%</div> </div> <!-- End Skill Bar --> <div class="skillbar clearfix " data-percent="1%"> <div class="skillbar-title" style="background: #27ae60;"><span> <p class="blur">SINGING</p></span></div> <div class="skillbar-bar" style="background: #2ecc71;"></div> <div class="skill-bar-percent">1%</div> </div> <!-- End Skill Bar --> <div class="skillbar clearfix " data-percent="100%"> <div class="skillbar-title" style="background: #27ae25;"><span> <p class="blur">9GAG</p></span></div> <div class="skillbar-bar" style="background: #2ecc20;"></div> <div class="skill-bar-percent">100%</div> </div> <!-- End Skill Bar --> </div> </div> </div> </div> </div> </div> </section> <section id="feature-six" class="feature-dark"> <div class="container"> <div class="row"> <div class="feature-content"> <div class="col-lg-6 hidden-md-down"> <img src="img/explorer.jpg" alt="explorer"> </div> <div class="col-lg-5 col-lg-offset-1"> <p>I genuinely believe that all experiences - good and bad - can have a positive effect.</p> <img src="img/funny.jpg" alt="smile"> </div> </div> </div> </div> </section> <footer id="main-footer"> <div class="container"> <div id="particles-js"> <div class="row"> <div class="col-md-6"> © 2016 The original Webdesigner<br> Coded by Mihael Sobočan </div> <div class="col-md-2"> <ul class="list-unstyled"> <li><a href="#stage">Home</a></li> <li><a href="#about">About me</a></li> </ul> </div> <div class="col-md-2"> </div> <div class="col-md-2"> </div> </div> </div> </footer> <!-- Tether for Bootstrap --> <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> <!-- jQuery first, then Bootstrap JS. --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/progress.js"></script> <script src="js/app.js"></script> <script src="js/particles.js"></script> <script src="js/jquery.js"></script> </body> </html>
4 个解决方案
解决方案1
2 2016-07-08 16:10:20
您需要在运行主要代码之前加载particles.js。 您可以通过在脚本元素中添加defer标签来实现。
<script src="mainScript.js" defer="defer"></script>
用脚本的文件名替换mainScript
解决方案2
2 2016-07-08 16:12:21
假设app.js是包含您在问题中粘贴的JavaScript代码的文件，那么这就是问题所在：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/progress.js"></script>
<!-- this file is included BEFORE particles.js! -->
<script src="js/app.js"></script>
<script src="js/particles.js"></script>
<script src="js/jquery.js"></script>
相反，尝试
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/particles.js"></script>
<script src="js/progress.js"></script>
<script src="js/app.js"></script>
<script src="js/jquery.js"></script>
解决方案3
1 2016-07-08 16:11:15
尝试在脚本声明之前加载particle.js
解决方案4
-1 2017-12-01 05:32:49
您必须先调用particle.js脚本文件，然后再调用其他脚本
无法添加particle.js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.