如何在Particle JS中实现鼠标悬浮时改变形状粒子的颜色？

核心逻辑：通过监听粒子容器的鼠标进出事件，切换粒子配置后重新渲染实例即可实现效果。

完整实现代码 #

1. HTML 结构 #

<!-- 粒子容器 -->
<div id="particles-js"></div>

2. JS 逻辑 #

// 1. 定义默认状态粒子配置
const defaultConfig = {
  particles: {
    number: { value: 80 },
    color: { value: "#666666" }, // 默认点颜色：灰色
    line_linked: {
      enable: true,
      color: "#999999", // 默认连线颜色：浅灰色
      opacity: 0.5,
      width: 1
    },
    size: { value: 3 }
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      onhover: { enable: true, mode: "grab" }
    }
  }
}

// 2. 定义悬浮状态粒子配置
const hoverConfig = {
  ...defaultConfig, // 复用其他配置，仅修改颜色相关字段
  particles: {
    ...defaultConfig.particles,
    color: { value: "#165DFF" }, // 悬浮时点颜色：蓝色
    line_linked: {
      ...defaultConfig.particles.line_linked,
      color: "#4080FF" // 悬浮时连线颜色：浅蓝色
    }
  }
}

// 3. 初始化粒子实例
let currentConfig = defaultConfig
particlesJS('particles-js', currentConfig)

// 4. 绑定悬浮事件
const particleContainer = document.getElementById('particles-js')
particleContainer.addEventListener('mouseenter', () => {
  // 销毁当前实例
  if (window.pJSDom && window.pJSDom.length > 0) {
    window.pJSDom[0].pJS.fn.vendors.destroypJS()
    window.pJSDom = []
  }
  // 用悬浮配置重新初始化
  particlesJS('particles-js', hoverConfig)
})

particleContainer.addEventListener('mouseleave', () => {
  // 销毁当前实例
  if (window.pJSDom && window.pJSDom.length > 0) {
    window.pJSDom[0].pJS.fn.vendors.destroypJS()
    window.pJSDom = []
  }
  // 用默认配置重新初始化
  particlesJS('particles-js', defaultConfig)
})

可自定义调整项 #

• 如需修改颜色，直接替换两套配置中对应的色值即可，支持十六进制、rgb、rgba格式的色值
• 如果你的页面有多个Particle JS实例，修改pJSDom的索引值即可匹配对应实例
• 粒子数量较多的场景可以不用销毁重建，直接修改pJSDom[0].pJS.particles.color.value和pJSDom[0].pJS.particles.line_linked.color字段后，调用pJSDom[0].pJS.fn.particlesRefresh()方法刷新即可，能有效降低性能消耗

内容的提问来源于stack exchange，提问作者Syyedaa