无法添加particles.js [英] unnable to add particles.js
本文介绍了无法添加particles.js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法在我的网站上实现particles.js.我收到错误:未被捕获的ReferenceError:未定义particlesJS. 我从下载站点尝试了该演示，在那里可以正常工作，然后从那里复制了代码，但站点上没有任何内容.
I have a problem implementih particles.js to my website. I get the error: Uncaught ReferenceError: particlesJS is not defined. i tried with the demo from the download site, there it is working, then i copyed the code from there and nothing on my site.
/* -----------------------------------------------
/* 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>
推荐答案
假定app.js是包含您粘贴在问题中的JavaScript代码的文件，那么这就是问题:
Assuming app.js is the file which contains the JavaScript code you've pasted in your question, then here's the problem:
<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>
这篇关于无法添加particles.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
