particles.js是否重新启动或运行多个示例?

ac1kyiln  于 2021-09-23  发布在  Java
关注(0)|答案(0)|浏览(151)

有人能想出如何多次运行此函数或以某种方式重新启动它吗?因为当我再次尝试使用pjs时,它似乎只在抛出错误“pjs不是函数”之前运行一次。还有,最有效的方法是什么?https://github.com/vincentgarreau/particles.js/
例子:https://jsfiddle.net/matrx/rfd7es3y/

/* ---------- particles.js SETTINGS ------------ */
    function particles_bg(id){
        pJS(id, {
          "particles": {
            "number": {
              "value": 1500,
              "density": {
                "enable": true,
                "value_area": 700
              }
            },
            "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": true,
                "speed": 0.2,
                "opacity_min": 0,
                "sync": false
              }
            },
            "size": {
              "value": 2,
              "random": true,
              "anim": {
                "enable": true,
                "speed": 2,
                "size_min": 0,
                "sync": false
              }
            },
            "line_linked": {
              "enable": false,
              "distance": 150,
              "color": "#ffffff",
              "opacity": 0.4,
              "width": 1
            },
            "move": {
              "enable": true,
              "speed": 0.2,
              "direction": "none",
              "random": true,
              "straight": false,
              "out_mode": "out",
              "bounce": false,
              "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
              }
            }
          },
          "interactivity": {
            "detect_on": "canvas",
            "events": {
              "onhover": {
                "enable": true,
                "mode": "bubble"
              },
              "onclick": {
                "enable": true,
                "mode": "push"
              },
              "resize": true
            },
            "modes": {
              "grab": {
                "distance": 400,
                "line_linked": {
                  "opacity": 1
                }
              },
              "bubble": {
                "distance": 85,
                "size": 1,
                "duration": 3,
                "opacity": 1,
                "speed": 3
              },
              "repulse": {
                "distance": 200,
                "duration": 0.4
              },
              "push": {
                "particles_nb": 4
              },
              "remove": {
                "particles_nb": 2
              }
            }
          },
          "retina_detect": true
        });
        //document.getElementById("pJS").remove();

    }
/* ---------- particles.js RUN ------------ */
particles_bg('p1');
particles_bg('p2');

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题