当前位置：首页 > JavaScript

js 弹幕实现

2026-03-14 15:03:31JavaScript

实现弹幕的基本思路

弹幕功能的核心是在屏幕上动态显示滚动或静止的文本消息。通常需要以下几个关键步骤：创建弹幕元素、控制弹幕运动、管理弹幕的生命周期。

创建弹幕元素

使用DOM操作创建弹幕元素，通常是一个带有样式的div或span元素。需要设置绝对定位、颜色、字体大小等样式属性。

function createDanmu(text, color, fontSize) {
  const danmu = document.createElement('div');
  danmu.textContent = text;
  danmu.style.position = 'absolute';
  danmu.style.color = color || '#fff';
  danmu.style.fontSize = (fontSize || '24') + 'px';
  danmu.style.whiteSpace = 'nowrap';
  return danmu;
}

控制弹幕运动

弹幕运动可以通过CSS动画或JavaScript定时器实现。CSS动画性能更好，推荐使用。

js 弹幕实现

function launchDanmu(danmu, container) {
  container.appendChild(danmu);
  const containerWidth = container.offsetWidth;
  const danmuWidth = danmu.offsetWidth;

  // 随机垂直位置
  const top = Math.random() * (container.offsetHeight - danmu.offsetHeight);
  danmu.style.top = top + 'px';

  // 从右向左运动
  danmu.style.left = containerWidth + 'px';

  const duration = 5 + Math.random() * 5; // 随机持续时间
  danmu.style.transition = `left ${duration}s linear`;

  setTimeout(() => {
    danmu.style.left = -danmuWidth + 'px';
  }, 0);

  // 动画结束后移除元素
  setTimeout(() => {
    container.removeChild(danmu);
  }, duration * 1000);
}

弹幕容器设置

需要一个固定位置的容器来承载所有弹幕元素，通常设置为全屏或视频区域大小。

<div id="danmu-container" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden;"></div>

完整实现示例

结合上述组件，可以实现一个简单的弹幕系统：

js 弹幕实现

class DanmuSystem {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
    this.queue = [];
    this.maxConcurrent = 50;
  }

  add(text, color, fontSize) {
    const danmu = createDanmu(text, color, fontSize);
    this.queue.push(danmu);
    this.processQueue();
  }

  processQueue() {
    while (this.queue.length > 0 && this.container.children.length < this.maxConcurrent) {
      const danmu = this.queue.shift();
      launchDanmu(danmu, this.container);
    }
  }
}

// 使用示例
const danmuSystem = new DanmuSystem('danmu-container');
setInterval(() => {
  danmuSystem.add('这是一条弹幕消息', '#ff0000', 24);
}, 300);