当前位置：首页 > VUE

vue实现字幕滚动

2026-02-19 06:40:19VUE

实现字幕滚动效果

在Vue中实现字幕滚动效果可以通过CSS动画或JavaScript动态控制样式完成。以下是两种常见实现方式：

CSS动画方案

使用@keyframes定义滚动动画，结合Vue的模板和样式绑定：

<template>
  <div class="scroll-container">
    <div class="scroll-text" :style="{ 'animation-duration': duration + 's' }">
      {{ text }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    text: String,
    duration: {
      type: Number,
      default: 10
    }
  }
}
</script>

<style>
.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-text {
  display: inline-block;
  padding-left: 100%;
  animation: scroll linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
</style>

JavaScript动态控制方案

通过计算位移实现更灵活的控制：

<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div 
      class="scrolling-text" 
      :style="{ transform: `translateX(${offset}px)` }"
    >
      {{ text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      offset: 0,
      requestId: null,
      speed: 1
    }
  },
  props: {
    text: String
  },
  mounted() {
    this.startScroll()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.requestId)
  },
  methods: {
    startScroll() {
      const step = () => {
        this.offset -= this.speed
        if (Math.abs(this.offset) > this.$refs.wrapper.offsetWidth) {
          this.offset = 0
        }
        this.requestId = requestAnimationFrame(step)
      }
      step()
    }
  }
}
</script>

<style>
.scroll-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.scrolling-text {
  white-space: nowrap;
  position: absolute;
}
</style>

双向无限循环方案

实现更流畅的无限循环效果：

<template>
  <div class="marquee">
    <div class="track" :style="trackStyle">
      <span v-for="(item, index) in 2" :key="index">{{ text }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    text: String,
    speed: {
      type: Number,
      default: 50
    }
  },
  data() {
    return {
      progress: 0
    }
  },
  computed: {
    trackStyle() {
      return {
        transform: `translateX(${this.progress}%)`,
        animationDuration: `${this.speed}s`
      }
    }
  }
}
</script>

<style>
.marquee {
  overflow: hidden;
}

.track {
  display: inline-block;
  white-space: nowrap;
  animation: scroll linear infinite;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
</style>