快捷導(dǎo)航

Vue實現(xiàn)文字滾動(跑馬燈)效果的四種方式

更新時間：2026年04月10日 10:01:22 作者：前端那點事

文章介紹了在Vue中實現(xiàn)文字滾動（跑馬燈）的四種方式,包括純CSS實現(xiàn)、帶有鼠標(biāo)懸浮暫停的滾動、真正無縫的滾動以及JS控制滾動,每種方式都有其特點和適用場景,需要的朋友可以參考下

方式1：純 CSS 跑馬燈（推薦）

Marquee.vue

<template>
  <div class="marquee-wrap">
    <div class="marquee-content">
      {{ text }}
    </div>
  </div>
</template>
<script setup>
const text = '這里是需要滾動的文字，Vue 跑馬燈效果，從右向左無限滾動～';
</script>
<style scoped>
.marquee-wrap {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background: #f5f5f5;
  padding: 8px 16px;
  border-radius: 8px;
}
.marquee-content {
  display: inline-block;
  animation: marquee 15s linear infinite;
}
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

特點：

一行無限滾動
無 JS，性能最好
鼠標(biāo)懸浮暫停版往下看

方式2：hover 暫停 + 無縫滾動（更常用）

<template>
  <div class="box">
    <div class="marquee" @mouseenter="pause" @mouseleave="play">
      <div class="text" :style="{ animationPlayState }">
        {{ content }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const content = 'Vue3 無縫跑馬燈，鼠標(biāo)移入暫停，移出繼續(xù)滾動～';
const animationPlayState = ref('running');
const pause = () => {
  animationPlayState.value = 'paused';
};
const play = () => {
  animationPlayState.value = 'running';
};
</script>
<style scoped>
.box {
  width: 100%;
  overflow: hidden;
  background: #f9f9f9;
  padding: 10px;
  border-radius: 6px;
}
.marquee {
  white-space: nowrap;
}
.text {
  display: inline-block;
  animation: move 12s linear infinite;
}
@keyframes move {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

方式3：真正無縫（無空白，首尾銜接）

適合公告、長文本：

<template>
  <div class="wrap">
    <div class="box">
      <span class="txt1">{{ text }}</span>
      <span class="txt2">{{ text }}</span>
    </div>
  </div>
</template>
<script setup>
const text = '這里是真正無縫跑馬燈，沒有空白間隔，一直循環(huán)滾動';
</script>
<style scoped>
.wrap {
  width: 100%;
  overflow: hidden;
  background: #fff8e1;
  padding: 8px 0;
}
.box {
  display: flex;
  width: max-content;
  animation: scroll 10s linear infinite;
}
.txt1, .txt2 {
  padding: 0 20px;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
</style>

方式4：JS 控制滾動（可變速、可停止）

<template>
  <div class="box" style="overflow: hidden">
    <div class="text" :style="{ marginLeft: `${left}px` }">
      JS 控制跑馬燈，可隨時停止、加速、減速
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const left = ref(300);
let timer = null;
onMounted(() => {
  timer = setInterval(() => {
    left.value -= 1;
    if (left.value < -300) left.value = 300;
  }, 20);
});
onUnmounted(() => clearInterval(timer));
</script>

到此這篇關(guān)于Vue實現(xiàn)文字滾動(跑馬燈)效果的四種方式的文章就介紹到這了,更多相關(guān)Vue文字滾動(跑馬燈)效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: