javascript - 无法添加 particles.js-6ren

javascript - 无法添加 particles.js

转载作者：行者123 更新时间：2023-11-29 17:56:57

我在我的网站上实现 particles.js 时遇到问题。我收到错误:Uncaught ReferenceError: particlesJS is not defined。我尝试了下载网站上的演示，它在那里工作，然后我从那里复制了代码，但我的网站上没有任何内容。

/* -----------------------------------------------
/* 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">
            &#9776;
        </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">
              &copy 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 代码的文件，那么问题如下:

<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>

关于javascript - 无法添加 particles.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38271116/

文章推荐： javascript - Angular 2 路由器 + angular-cli

文章推荐： mysql - 关于全文索引搜索

文章推荐： mysql - 时间戳的json格式

javascript - 三.js : Pass text instead of particles into particle cloud
我有一个 fork 的 Three.js codepen 实验，其中有方形颗粒漂浮在周围。但我正在尝试修改它，以便我可以将文本(几何图形？)传递到其中，替换方形粒子，有点像单词/标签云。这可能吗？
Particles.js：为Web项目增添动态粒子效果
Particles.js：为Web项目增添动态粒子效果示例介绍 Particles.js是一个轻量级的JavaScript库，用于在Web页面上创建和管理动态粒子效果。它允许开发者通
particle-filter - 在带替换的粒子过滤器中重新采样
请帮忙。跟踪帧中对象的凝聚算法步骤是: 初始化一个点，在它周围随机选择N个点，设置权重为1/N。根据动态模型(等速模型)传播点。现在，使用观察模型计算每个粒子的权重。到现在为止，有N个粒子。现在
css - particles.js动画区域被文字和图片遮挡
我想在整个绿色区域的背景中获得粒子动画，但文本和图像被阻挡(参见 http://billiving-qa.azurewebsites.net)。动画仅出现在绿色区域的底部。这是包装 div: 谢谢
javascript - Particles.js — 框架更改时修改
为我完全缺乏 javascript 直觉而道歉，但我想知道是否可以更改 particles.js 的属性动态对象: 我正在使用 jQuery 来检测用户何时在屏幕上移动 slider (成功)。但是，
javascript - particles.js 未正确加载到页面上
HTML 脚本 particlesJS.load('particles-js', 'particles.json', function(){ console.lo
javascript - Particles JS - 如何更改线条之间的背景颜色？
拜托，我需要帮助... 我必须创建一个粒子 JS Canvas 。这并不难，但我必须像这样更改每行之间的背景颜色: 例子我浏览了粒子 JS 提供的所有设置，但没有做我需要的事情......如果有人可
javascript - 无法添加 particles.js
我在我的网站上实现 particles.js 时遇到问题。我收到错误:Uncaught ReferenceError: particlesJS is not defined。我尝试了下载网站上的演示，
html - 使用 particles.js
我使用 particles.js 作为我的背景，但粒子只跨越到窗口的大小，并在向下滚动时消失。为了解决这个问题，我将 position: fixed; 添加到它的 css 选择器中。尽管粒子完全跨越了
javascript - Particles.js 不与光标交互
我有一个 particles.js 文件作为我网站的背景，它显示正确但不与鼠标交互，它只设置为像视频一样。非常感谢您。更新:在下面的评论中解决。只需在您的 app.js 中更改“窗口”而不是“ C
javascript - 如何更改背景以放置 particles.js？
我从 Envato 购买了模板“Penelope”，我想用 particles.js 背景更改背景。这是为我提供此模板的原始 CSS。我想知道如何更改它以放置 particles.js 背景。我的r
javascript - 在正确的图层上获取 particles.js？
我做不到particles.js作为背景工作。它覆盖了整个页面，我尝试为我想要覆盖 particles.js 的所有内容设置更高的 z-index (50)。这是 particles codepen
javascript - Particles.js 不允许围绕文本生成
我终于让 particle.js 作为背景工作了。但是当您点击文本上方或下方(高度方向)时，您只能生成星星，您不能在文本所在的位置(或与其容器在同一行)生成它们。有办法解决这个问题吗？我的 HT
javascript - 如何在一个页面中多次使用 particles.js？
我想知道如何在单个页面中多次添加多个 particles.js？似乎每页只能执行一次。但我想不止一次使用它，比如在 2 个单独的 div 中。我怎样才能做到这一点？我只能做一次，但似乎不能在另一个 d
c++ - 粒子系统 : particle generation
我有一个系统可以从源中生成粒子并更新它们的位置。目前，我在 OpenGL 中编写了一个程序，它调用我的 GenerateParticles(...) 和 UpdateParticles(...) 并显
javascript - particles.js 没有覆盖整个页面
我正在尝试使用 particles.js 作为背景，但我无法将 Canvas 设置为全尺寸背景。我针对类似问题尝试了至少 10 种不同的解决方案，但均无效果。 Canvas 始终作为具有与屏幕宽高比
javascript - Particles.js 仅作为特定部分的背景
我正在使用 Vincent Garreau 的 Particles.js(会链接但不能共享多个链接)在我网站的特定部分实现粒子效果背景。
javascript - 如何使用 particles.js？
我似乎无法让 particles.js 正常工作——我究竟做错了什么？任何见解将不胜感激，我无法确定错误是否是由于外部依赖性造成的... HTML: CSS: /* ---- particles
javascript - Particles.js 作为背景？
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th
c# - Unity Particle Collider 与粒子
团结我创建了两个碰撞器效果，并希望它们在相互碰撞时可以发挥某些作用。但我不知道如何制作两个粒子对撞机。如何让火与水相撞，水能灭火。感谢帮助!!!! 最佳答案来自文档 ( http://docs.u

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 无法添加 particles.js