当前位置：首页 > VUE

vue.js 实现弹幕

2026-02-23 04:00:23VUE

Vue.js 实现弹幕功能

弹幕功能通常涉及动态生成、移动和销毁大量文本元素。以下是基于 Vue.js 的实现方法：

核心思路

使用 CSS 动画控制弹幕的横向移动
通过 Vue 的 v-for 动态渲染弹幕列表
使用定时器控制弹幕的生成和销毁

实现步骤

HTML 结构

<template>
  <div class="danmu-container">
    <div 
      v-for="(item, index) in danmuList" 
      :key="index"
      class="danmu-item"
      :style="{
        top: item.top + 'px',
        color: item.color,
        animationDuration: item.duration + 's'
      }"
    >
      {{ item.text }}
    </div>
    <input v-model="inputText" @keyup.enter="sendDanmu" />
  </div>
</template>

CSS 样式

.danmu-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: #000;
}

.danmu-item {
  position: absolute;
  white-space: nowrap;
  font-size: 20px;
  animation: danmuMove linear;
}

@keyframes danmuMove {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

JavaScript 逻辑

export default {
  data() {
    return {
      danmuList: [],
      inputText: '',
      colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff']
    }
  },
  methods: {
    sendDanmu() {
      if (!this.inputText.trim()) return

      const newDanmu = {
        text: this.inputText,
        top: Math.random() * 250,
        color: this.colors[Math.floor(Math.random() * this.colors.length)],
        duration: 5 + Math.random() * 5
      }

      this.danmuList.push(newDanmu)
      this.inputText = ''

      setTimeout(() => {
        this.danmuList.shift()
      }, newDanmu.duration * 1000)
    },
    autoGenerate() {
      setInterval(() => {
        const texts = ['666', '哈哈哈', '太棒了', '学到了', 'Vue牛逼']
        const randomText = texts[Math.floor(Math.random() * texts.length)]
        this.danmuList.push({
          text: randomText,
          top: Math.random() * 250,
          color: this.colors[Math.floor(Math.random() * this.colors.length)],
          duration: 5 + Math.random() * 5
        })
      }, 1000)
    }
  },
  mounted() {
    this.autoGenerate()
  }
}