Question

NET MVC Core，我正在尝试使用Particles.js。我已经尝试参考一些教程，但是无法解决此问题。这是通常的样子。 https://vincentgarreau.com/particles.js/#default

但是我有了大而超级滞后的按钮，它也没有占据全屏，也没有悬停动作（因此，当鼠标接近时，圆会移开）。尽管onclick圈子有效。而且配置应该没有错，因为我下载了默认配置。

更新：在发布之前，我设法使其全屏显示。但是，仍然存在大按钮和延迟。

以下是我到目前为止的代码。我试图搜索ID或类，但是由于缺少文档，因此很难找到它。希望知道它的人可以提供帮助！非常感谢：）

@{
    ViewData["Title"] = "Home Page";
}

<div id="particles-js" style="background-color: rgb(0, 0, 0); background-image: url(&quot;&quot;); background-size: cover; background-repeat: no-repeat; ba">
    <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
</div>
<script src="~/js/particles.js" data-turbolinks-track="reload" asp-append-version="true"></script>


<script>
    particlesJS("particles-js", {
        particles: {
            number: {
                value: 400,
                density: {
                    enable: true,
                    value_area: 800
                }
            },
            color: {
                value: '#fff'
            },
            shape: {
                type: 'circle',
                stroke: {
                    width: 0,
                    color: '#ff0000'
                },
                polygon: {
                    nb_sides: 5
                },
                image: {
                    src: '',
                    width: 100,
                    height: 100
                }
            },
            opacity: {
                value: 1,
                random: false,
                anim: {
                    enable: false,
                    speed: 2,
                    opacity_min: 0,
                    sync: false
                }
            },
            size: {
                value: 20,
                random: false,
                anim: {
                    enable: false,
                    speed: 20,
                    size_min: 0,
                    sync: false
                }
            },
            line_linked: {
                enable: true,
                distance: 100,
                color: '#fff',
                opacity: 1,
                width: 1
            },
            move: {
                enable: true,
                speed: 2,
                direction: 'none',
                random: false,
                straight: false,
                out_mode: 'out',
                bounce: false,
                attract: {
                    enable: false,
                    rotateX: 3000,
                    rotateY: 3000
                }
            },
            array: []
        },
        interactivity: {
            detect_on: 'canvas',
            events: {
                onhover: {
                    enable: true,
                    mode: 'grab'
                },
                onclick: {
                    enable: true,
                    mode: 'push'
                },
                resize: true
            },
            modes: {
                grab: {
                    distance: 100,
                    line_linked: {
                        opacity: 1
                    }
                },
                bubble: {
                    distance: 200,
                    size: 80,
                    duration: 0.4
                },
                repulse: {
                    distance: 200,
                    duration: 0.4
                },
                push: {
                    particles_nb: 4
                },
                remove: {
                    particles_nb: 2
                }
            },
            mouse: {}
        },
        retina_detect: false,
    });
    //var count_particles, stats, update;
    //stats = new Stats;
    //stats.setMode(0);
    //stats.domElement.style.position = 'absolute';
    //stats.domElement.style.left = '0px';
    //stats.domElement.style.top = '0px';
    //document.body.appendChild(stats.domElement);
    //count_particles = document.querySelector('.js-count-particles');
    //update = function () {
    //    stats.begin();
    //    stats.end();
    //    if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
    //        count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
    //    }
    //    requestAnimationFrame(update);
    //};
    //requestAnimationFrame(update);;
</script>

Answer 1

更新：我终于找到了答案。为了方便以后从事此工作的人员，请确保使用侧边栏中的下载内容而不是中间位置的下载内容。

不是这个（在中心下载）：

但是，这（右下角的“下载当前配置（json）”）：

.NET Core中Particles.js无法正常工作

1 个答案: