Javascript 当定位在其他引导转盘滑动位置时，Particles.js画布不工作
我正在制作一个带有引导转盘的网站，它应该包含一些动画画布。 我想在第二张幻灯片上使用Particles.js动画，但它不起作用。 它只在第一张幻灯片上起作用，我不知道为什么 有人能帮我吗 代码如下：Javascript 当定位在其他引导转盘滑动位置时，Particles.js画布不工作,javascript,twitter-bootstrap,canvas,carousel,particles.js,Javascript,Twitter Bootstrap,Canvas,Carousel,Particles.js,我正在制作一个带有引导转盘的网站，它应该包含一些动画画布。 我想在第二张幻灯片上使用Particles.js动画，但它不起作用。 它只在第一张幻灯片上起作用，我不知道为什么 有人能帮我吗 代码如下： <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta na
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
#myCarousel {
height: 500px
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
canvas {
position: relative;
/*pointer-events:none;*/
top: 0;
left: 0
}
/* Particles Canvas*/
#particles-js{
height: 500px;
width: 100%;
background-color: #D0EDF5;
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h1>First Slide</h1>
</div>
<div class="item">
<div id="particles-js"></div>
</div>
<div class="item">
<h1>Third Slide</h1>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script type="text/javascript">
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 60,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#0A8B80"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 50
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 20,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#65BBC4",
"opacity": 0.4,
"width": 2
},
"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": 80,
"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": "#D0EDF5",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);
</script>
</body>
</html>
引导示例
#旋转木马{
高度：500px
}
.carousel-inner>.item>img，
.carousel-inner>.item>a>img{
宽度：70%；
保证金：自动；
}
帆布{
位置：相对位置；
/*指针事件：无*/
排名：0；
左：0
}
/*粒子画布*/
#粒子js{
高度：500px；
宽度：100%；
背景色：#D0EDF5；
背景图像：url（“”）；
背景尺寸：封面；
背景位置：50%50%；
背景重复：无重复；
}
第一张幻灯片
第三张幻灯片
particlesJS（‘particles-js’，
{
“粒子”：{
“编号”：{
“价值”：60，
“密度”：{
“启用”：正确，
“价值面积”：800
}
},
“颜色”：{
“值”：“0A8B80”
},
“形状”：{
“类型”：“圆圈”，
“笔划”：{
“宽度”：0，
“颜色”：“000000”
},
“多边形”：{
“nb_边”：5
},
“图像”：{
“src”：“img/github.svg”，
“宽度”：100，
“高度”：50
}
},
“不透明度”：{
“值”：0.5，
“随机”：假，
“动画”：{
“enable”：false，
“速度”：1，
“不透明度最小值”：0.1，
“同步”：错误
}
},
“尺寸”：{
“价值”：20，
“随机”：对，
“动画”：{
“enable”：false，
“速度”：40，
“最小尺寸”：0.1，
“同步”：错误
}
},
“行链接”：{
“启用”：正确，
“距离”：150，
“颜色”：“65BBC4”，
“不透明度”：0.4，
“宽度”：2
},
“移动”：{
“启用”：正确，
“速度”：6，
“方向”：“无”，
“随机”：假，
“直”：假，
“输出模式”：“输出”，
“吸引”：{
“enable”：false，
“rotateX”：600，
“rotateY”：1200
}
}
},
“互动性”：{
“在画布上检测”：“画布”，
“事件”：{
“悬停”：{
“启用”：正确，
“模式”：“拒绝”
},
“onclick”：{
“启用”：正确，
“模式”：“推送”
},
“调整大小”：true
},
“模式”：{
“抓取”：{
“距离”：400，
“行链接”：{
“不透明度”：1
}
},
“泡沫”：{
“距离”：400，
“尺寸”：80，
“期限”：2，
“不透明度”：8，
“速度”：3
},
“拒绝”：{
“距离”：200
},
“推送”：{
“粒子”：4
},
“删除”：{
“粒子”：2
}
}
},
“视网膜检测”：正确，
“配置演示”：{
“隐藏卡”：假，
“背景颜色”：“D0EDF5”，
“背景图像”：“，
“背景职位”：“50%50%”，
“背景重复”：“不重复”，
“背景尺寸”：“封面”
}
}
);
因为当particles.js初始化时，它会读取
offsetHeightoffsetWidth补充说明： 在幻灯片事件之后初始化particles.js可以确保当它发生时，目标元素已经可见，这样particles.js就可以获得有效的度量 另一种解决方案是在每次幻灯片事件后触发调整大小事件。将重新计算宽度和高度[3]。这也是为什么这个问题的作者可以通过打开开发者控制台来启动动画 参考：
- [1] :
- [2] :
- [3] :