当前位置：首页 > VUE

vue 实现跑马灯

2026-02-21 17:10:42VUE

实现跑马灯效果的方法

在Vue中实现跑马灯效果可以通过多种方式完成，以下是几种常见的方法：

使用CSS动画

通过CSS的animation和@keyframes实现文字滚动效果。定义一个无限循环的动画，使内容从右向左移动。

<template>
  <div class="marquee-container">
    <div class="marquee-content">{{ text }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '这是一段跑马灯文字，会从右向左滚动显示。'
    }
  }
}
</script>

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

.marquee-content {
  display: inline-block;
  animation: marquee 10s linear infinite;
}

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

使用JavaScript定时器

通过setInterval动态修改内容的transform或margin属性，实现平滑滚动效果。

<template>
  <div class="marquee-container" ref="marquee">
    <div class="marquee-content">{{ text }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '这是一段跑马灯文字，会从右向左滚动显示。',
      position: 0
    }
  },
  mounted() {
    this.startMarquee();
  },
  methods: {
    startMarquee() {
      setInterval(() => {
        this.position -= 1;
        this.$refs.marquee.style.transform = `translateX(${this.position}px)`;
        if (this.position <= -this.$refs.marquee.offsetWidth) {
          this.position = this.$refs.marquee.offsetWidth;
        }
      }, 20);
    }
  }
}
</script>

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

.marquee-content {
  display: inline-block;
}
</style>

使用第三方库

可以使用现成的Vue跑马灯组件，如vue-marquee-text-component，简化实现过程。

安装依赖：

npm install vue-marquee-text-component

使用示例：

<template>
  <marquee-text :duration="10" :repeat="Infinity">
    {{ text }}
  </marquee-text>
</template>

<script>
import MarqueeText from 'vue-marquee-text-component';

export default {
  components: {
    MarqueeText
  },
  data() {
    return {
      text: '这是一段跑马灯文字，会从右向左滚动显示。'
    }
  }
}
</script>