js动态粒子鼠标吸附

基础概念

JavaScript 动态粒子鼠标吸附是一种常见的网页交互效果，它通过在页面上创建一系列的粒子（通常是圆形），并使这些粒子在鼠标移动时跟随鼠标指针，产生一种吸附的效果。这种效果通常用于增强用户体验，使网页看起来更加生动和有趣。

类型

简单吸附：粒子简单地跟随鼠标移动。
复杂吸附：粒子根据鼠标的位置和速度有不同的行为，如改变大小、颜色或形状。
交互式吸附：粒子与页面上的其他元素产生交互，如点击粒子触发特定事件。

应用场景

网站首页：作为背景动画，增加视觉冲击力。
登录页面：提供有趣的背景，减少用户的焦虑感。
产品展示页：通过粒子效果突出产品特点。

示例代码

以下是一个简单的JavaScript和HTML5 Canvas实现的动态粒子鼠标吸附效果的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Particle Mouse Attraction</title>
<style>
  canvas {
    display: block;
    background: #000;
  }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  class Particle {
    constructor(x, y) {
      this.x = x;
      this.y = y;
      this.size = Math.random() * 5 + 1;
      this.speedX = Math.random() * 3 - 1.5;
      this.speedY = Math.random() * 3 - 1.5;
    }

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

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

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

      if (this.size > 0.2) this.size -= 0.1;
    }

    draw() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      ctx.fillStyle = '#fff';
      ctx.fill();
    }
  }

  let particles = [];
  let mouse = { x: undefined, y: undefined };

  window.addEventListener('mousemove', function(event) {
    mouse.x = event.x;
    mouse.y = event.y;
  });

  window.addEventListener('resize', function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  });

  function init() {
    for (let i = 0; i < 50; i++) {
      let x = Math.random() * canvas.width;
      let y = Math.random() * canvas.height;
      particles.push(new Particle(x, y));
    }
  }

  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < particles.length; i++) {
      particles[i].update(mouse);
      particles[i].draw();
      if (particles[i].size <= 0.3) {
        particles.splice(i, 1);
        i--;
      }
    }
    requestAnimationFrame(animate);
  }

  init();
  animate();
</script>
</body>
</html>