快捷導(dǎo)航

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

更新時(shí)間：2026年04月10日 10:01:22 作者：前端那點(diǎn)事

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

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

Marquee.vue

<template>
  <div class="marquee-wrap">
    <div class="marquee-content">
      {{ text }}
    </div>
  </div>
</template>
<script setup>
const text = '這里是需要滾動(dòng)的文字，Vue 跑馬燈效果，從右向左無(wú)限滾動(dòng)～';
</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>

特點(diǎn)：

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

方式2：hover 暫停 + 無(wú)縫滾動(dòng)（更常用）

<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 無(wú)縫跑馬燈，鼠標(biāo)移入暫停，移出繼續(xù)滾動(dòng)～';
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：真正無(wú)縫（無(wú)空白，首尾銜接）

適合公告、長(zhǎng)文本：

<template>
  <div class="wrap">
    <div class="box">
      <span class="txt1">{{ text }}</span>
      <span class="txt2">{{ text }}</span>
    </div>
  </div>
</template>
<script setup>
const text = '這里是真正無(wú)縫跑馬燈，沒(méi)有空白間隔，一直循環(huán)滾動(dòng)';
</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 控制滾動(dòng)（可變速、可停止）

<template>
  <div class="box" style="overflow: hidden">
    <div class="text" :style="{ marginLeft: `${left}px` }">
      JS 控制跑馬燈，可隨時(shí)停止、加速、減速
    </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實(shí)現(xiàn)文字滾動(dòng)(跑馬燈)效果的四種方式的文章就介紹到這了,更多相關(guān)Vue文字滾動(dòng)(跑馬燈)效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: