首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用particles.js将JSON链接到html不起作用。

使用particles.js将JSON链接到html不起作用。
EN

Stack Overflow用户
提问于 2018-07-10 07:23:34
回答 1查看 1.9K关注 0票数 0

我已经从这个网站下载了JSON库配置:https://vincentgarreau.com/particles.js/#default。我是JSON的新手,因此我不明白哪里出了问题。当我编译时,浏览器上只会弹出一个蓝屏,这意味着只有css可以播放。有没有人能帮我弄明白出了什么问题?我很抱歉发了这么长的帖子,但我真的不知道如何才能适应它,这样我才能清楚地知道我在做什么。

这是一个名为particles.html的超文本标记语言文件

代码语言:javascript
复制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="particles.js"></script>
<link href="particles.css" rel="stylesheet" type="text/css">
</head>
<body id="particles-js">

   <script type="text/javascript">
    particlesJS("particles-js",<strong>particlesjs-config.json</strong>);
  </script>

 </body>

</html>

这是我的CSS文件,名为particles.css

代码语言:javascript
复制
body{
    background: cornflowerblue;
   }

这是我下载的JSON配置。该文件名为particlesjs-config.json

代码语言:javascript
复制
    {
"particles": {
  "number": {
    "value": 80,
    "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": 3,
  "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",
  "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
}
EN

回答 1

Stack Overflow用户

发布于 2018-07-10 07:47:23

请参阅此页面https://github.com/VincentGarreau/particles.js

看起来您没有正确加载JSON文件。应该类似于以下内容

代码语言:javascript
复制
<script>
  particlesJS.load('particles-js', 'particles.json', function(){
    console.log('particles.json loaded...do your thing!');
  });
</script>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51255264

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档