当前位置：首页 > VUE

vue跑马灯实现

2026-01-20 07:40:44VUE

使用 CSS 动画实现跑马灯

通过 CSS 的 @keyframes 和 transform 属性实现水平滚动的跑马灯效果。定义一个动画，让内容从右向左移动。

<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 动态计算宽度

对于动态内容或不确定宽度的情况，通过 JavaScript 计算内容宽度并动态设置动画时长。

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

<script>
export default {
  data() {
    return {
      text: '动态宽度内容，动画时长会根据内容长度自动调整。'
    }
  },
  mounted() {
    this.adjustAnimationDuration();
  },
  methods: {
    adjustAnimationDuration() {
      const containerWidth = this.$refs.container.offsetWidth;
      const contentWidth = this.$refs.content.offsetWidth;
      const duration = (contentWidth / containerWidth) * 5; // 基础时长比例
      this.$refs.content.style.animationDuration = `${duration}s`;
    }
  }
}
</script>

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

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

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

无缝循环跑马灯

通过复制一份内容并交替动画，实现无缝循环效果。

vue跑马灯实现

<template>
  <div class="marquee-container">
    <div class="marquee-wrapper">
      <div class="marquee-content" v-for="(item, index) in 2" :key="index">
        {{ text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '无缝循环跑马灯效果，内容会连续滚动不中断。'
    }
  }
}
</script>

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

.marquee-wrapper {
  display: flex;
  width: 200%; /* 双倍宽度容纳两份内容 */
}

.marquee-content {
  flex: 1;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

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

垂直滚动跑马灯

修改动画方向实现垂直滚动效果。

<template>
  <div class="marquee-vertical">
    <div class="marquee-content">
      <div v-for="(item, index) in items" :key="index">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        '第一条消息',
        '第二条消息',
        '第三条消息',
        '第四条消息'
      ]
    }
  }
}
</script>

<style>
.marquee-vertical {
  height: 200px;
  overflow: hidden;
}

.marquee-content {
  animation: marquee-vertical 10s linear infinite;
}

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

使用第三方库 vue-marquee

对于更复杂的需求，可以使用专门的 Vue 跑马灯组件库。

vue跑马灯实现

安装依赖：

npm install vue-marquee-text-component

示例代码：

<template>
  <marquee-text :duration="20" :repeat="3">
    使用第三方库实现的跑马灯效果，支持更多配置选项。
  </marquee-text>
</template>

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

export default {
  components: {
    MarqueeText
  }
}
</script>

以上方法涵盖了从简单到复杂的多种跑马灯实现方式，可根据项目需求选择合适方案。CSS 动画方案性能较好，适合简单需求；JavaScript 方案更灵活；第三方库则提供开箱即用的丰富功能。