js代码鼠标跟随粒子特效

基础概念：鼠标跟随粒子特效是一种常见的网页交互效果，它通过JavaScript和CSS实现，使得页面上的粒子元素能够跟随鼠标指针移动，从而增强用户的交互体验。

优势：

增强互动性：使用户感觉页面更加生动和有趣。
视觉吸引力：吸引用户的注意力，提升用户体验。
技术展示：展示开发者的技术能力。

类型：

简单跟随：粒子直接跟随鼠标移动。
平滑跟随：粒子以一定的速度和加速度平滑地跟随鼠标。
复杂轨迹：粒子根据特定的算法（如贝塞尔曲线）跟随鼠标。

应用场景：

网站首页：作为背景特效提升视觉效果。
游戏界面：增加游戏的互动性和趣味性。
广告页面：吸引用户注意力，提高广告效果。

示例代码：以下是一个简单的鼠标跟随粒子特效的JavaScript和HTML/CSS代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouse Follow Particles</title>
<style>
  body {
    margin: 0;
    overflow: hidden;
  }
  .particle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ff0000;
    pointer-events: none;
  }
</style>
</head>
<body>
<script>
  const numParticles = 50;
  const particles = [];

  class Particle {
    constructor() {
      this.x = 0;
      this.y = 0;
      this.size = Math.random() * 5 + 5;
      this.speedX = Math.random() * 3 - 1.5;
      this.speedY = Math.random() * 3 - 1.5;
      this.element = document.createElement('div');
      this.element.className = 'particle';
      this.element.style.width = `${this.size}px`;
      this.element.style.height = `${this.size}px`;
      document.body.appendChild(this.element);
    }

    update(mouse) {
      const dx = mouse.x - this.x;
      const dy = mouse.y - this.y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      const forceDirectionX = dx / distance;
      const forceDirectionY = dy / distance;
      const maxDistance = 100;
      const force = (maxDistance - distance) / maxDistance;
      const directionX = forceDirectionX * force * 10;
      const directionY = forceDirectionY * force * 10;

      if (distance < maxDistance) {
        this.x -= directionX;
        this.y -= directionY;
      }

      this.x += this.speedX;
      this.y += this.speedY;

      this.element.style.left = `${this.x}px`;
      this.element.style.top = `${this.y}px`;
    }
  }

  for (let i = 0; i < numParticles; i++) {
    particles.push(new Particle());
  }

  document.addEventListener('mousemove', (event) => {
    const mouse = { x: event.clientX, y: event.clientY };
    particles.forEach(particle => particle.update(mouse));
  });
</script>
</body>
</html>

常见问题及解决方法：