Question

我正在使用Particle js创建网站。我被东西卡住了。
在Particle.js中，可以在单击点的同时打开链接或触发javascript函数。浏览了文档，但找不到实现该方法的方法。因此，我该如何实施。

这是我的代码：

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Particles button</title>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1 id="target">Venom</h1>
    <div id="particles-js"></div>
    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
    <script type="text/javascript" src="pinkmoon.js"></script>
</body>

</html>

particles.json文件

{
    "particles": {
        "number": {
            "value": 100,
            "density": {
                "enable": false,
                "value_area": 100
            }
        },
        "color": {
            "value": "#ee0000"
        },
        "shape": {
            "type": "circle",
            "stroke": {
                "width": 0.3,
                "color": "#0a0a0a"
            },
            "polygon": {
                "nb_sides": 1
            },
            "image": {
                "src": "dv.png"
            }
        },
        "opacity": {
            "value": 0.5,
            "random": true,
            "anim": {
                "enable": false,
                "speed": 1,
                "opacity_min": 0.1,
                "sync": false
            }
        },
        "size": {
            "value": 10,
            "random": true,
            "anim": {
                "enable": false,
                "speed": 80,
                "size_min": 0.1,
                "sync": false
            }
        },
        "line_linked": {
            "enable": true,
            "distance": 300,
            "color": "#000000",
            "opacity": 0.4,
            "width": 2
        },
        "move": {
            "enable": true,
            "speed": 2,
            "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": "bubble"
            },
            "onclick": {
                "enable": true,
                "mode": "push" //want to trigger a function here
            },
            "resize": true
        },
        "modes": {
            "grab": {
                "distance": 80,
                "line_linked": {
                    "opacity": 50
                }
            },
            "bubble": {
                "distance": 100,
                "size": 10,
                "duration": 2,
                "opacity": 0.8,
                "speed": 3
            },
            "repulse": {
                "distance": 100,
                "duration": 0.4
            },
            "push": {
                "particles_nb": 10,
                "size": 40
            },
            "remove": {
                "particles_nb": 2
            }
        }
    },
    "retina_detect": true
}

非常感谢。

Answer 1

这可以通过操纵particles.js脚本来实现。由于“推”模式用于在脚本中单击事件。单击粒子时触发以下功能。

 pJS.fn.modes.pushParticles = function(nb, pos){
   // code goes here
  };

粒子js onclick事件

1 个答案: