vue.js实现跑马灯文字滚动从右往左

admin 2026年02月07日 23:58 102 0

Vue.js实现文字从右往左滚动跑马灯，可通过组件化结合CSS动画完成，核心思路：在data中定义滚动文字，使用`或直接操作DOM，通过CSS的@keyframes定义从右到左的位移动画（如transform: translateX(-100%)），容器设置overflow: hidden，内部文字元素绝对定位并绑定动画，关键点包括计算文字宽度确保完全移出、设置animation-timing-function为线性、animation-iteration-count`为无限循环，实现流畅滚动效果，适配不同文字长度，动态调整动画时长，保证视觉连贯性。

Vue.js 实现文字跑马灯效果（从右往左滚动）

在网页开发中，跑马灯（Marquee）是一种经典而实用的动态效果，广泛应用于公告展示、新闻滚动、活动信息推送等场景，通过文字从右向左的连续滚动，不仅能够有效吸引用户注意力，还能在有限的页面空间内展示更多内容，Vue.js 作为一款现代化的前端框架，凭借其响应式数据绑定和组件化开发优势，为跑马灯效果提供了灵活可控的实现方案，本文将系统性地介绍如何使用 Vue.js 从零开始构建一个功能完善的从右往左滚动文字跑马灯，涵盖基础实现、交互控制、性能优化以及高级特性等多个维度。

基础实现：从右往左滚动的静态跑马灯

核心实现原理

从右往左滚动的本质在于让文字从容器右侧进入，持续向左移动直至完全离开容器，然后循环往复,实现这一效果需要把握三个关键点：

容器样式控制：通过 overflow: hidden 隐藏超出容器的文字部分，使用 white-space: nowrap 确保文字在一行内连续显示
动画轨迹设计：利用 CSS @keyframes 定义文字从 translateX(100%)（容器右侧）到 translateX(-100%)（容器左侧）的平滑移动
Vue 组件集成：将动画效果与 Vue 组件的数据绑定机制结合，实现内容的动态控制

完整代码实现

（1）组件模板（Marquee.vue）

<template>
  <div class="marquee-wrapper" :style="wrapperStyle">
    <div 
      class="marquee-content" 
      :style="contentStyle"
      :class="{ 'marquee-paused': isPaused }"
    >
      {{ displayText }}
    </div>
  </div>
</template>

（2）组件逻辑（Script）

<script>
export default {
  name: 'Marquee',
  props: {
    // 滚动文字内容
    text: {
      type: String,
      required: true
    },
    // 动画持续时间（单位：秒）
    duration: {
      type: Number,
      default: 15
    },
    // 是否暂停滚动
    pauseOnHover: {
      type: Boolean,
      default: true
    },
    // 容器高度
    height: {
      type: String,
      default: '40px'
    },
    // 背景颜色
    backgroundColor: {
      type: String,
      default: '#f5f5f5'
    }
  },
  data() {
    return {
      isPaused: false,
      animationDuration: this.duration
    };
  },
  computed: {
    // 显示文字（可能需要根据需求调整）
    displayText() {
      return this.text;
    },
    // 动画样式：动态设置动画持续时间
    contentStyle() {
      return {
        animationDuration: `${this.animationDuration}s`,
        animationName: 'marquee',
        animationTimingFunction: 'linear',
        animationIterationCount: 'infinite'
      };
    },
    // 容器样式
    wrapperStyle() {
      return {
        height: this.height,
        backgroundColor: this.backgroundColor
      };
    }
  },
  mounted() {
    // 根据文字长度动态调整动画速度
    this.adjustAnimationSpeed();
  },
  watch: {
    text() {
      this.adjustAnimationSpeed();
    }
  },
  methods: {
    // 根据文字长度动态调整动画速度
    adjustAnimationSpeed() {
      // 基础速度系数，可根据实际需求调整
      const speedFactor = 0.1;
      const baseSpeed = this.text.length * speedFactor;
      this.animationDuration = Math.max(this.duration, baseSpeed);
    },
    // 鼠标悬停处理
    handleMouseEnter() {
      if (this.pauseOnHover) {
        this.isPaused = true;
      }
    },
    handleMouseLeave() {
      if (this.pauseOnHover) {
        this.isPaused = false;
      }
    }
  }
};
</script>

（3）组件样式（Style）

<style scoped>
.marquee-wrapper {
  width: 100%;
  overflow: hidden; /* 隐藏超出容器的文字 */
  white-space: nowrap; /* 防止文字换行 */
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
  margin: 10px 0;
}
.marquee-content {
  display: inline-block;
  padding-left: 100%; /* 初始位置：从容器右侧开始 */
  will-change: transform; /* 优化动画性能 */
  user-select: none; /* 防止文字被选中 */
}
/* 鼠标悬停时暂停动画 */
.marquee-paused {
  animation-play-state: paused !important;
}
/* 定义从右往左的滚动动画 */
@keyframes marquee {
  0% {
    transform: translateX(0); /* 初始位置：右侧 */
  }
  100% {
    transform: translateX(-100%); /* 结束位置：左侧 */
  }
}
/* 兼容性处理 */
@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}
</style>

（4）使用示例（父组件）

<template>
  <div class="app-container">
    <h1>跑马灯效果演示</h1>
    <!-- 基础使用 -->
    <Marquee 
      text="欢迎访问我们的官方网站！最新活动：全场商品8折优惠，仅限本周！"
      duration="20"
      backgroundColor="#e3f2fd"
    />
    <!-- 带暂停功能 -->
    <Marquee 
      text="重要通知：系统将于今晚22:00-23:00进行维护升级，请提前保存工作内容。"
      :pauseOnHover="true"
      height="50px"
      backgroundColor="#fff3e0"
    />
    <!-- 快速滚动 -->
    <Marquee 
      text="【限时抢购】爆款商品限时特惠，数量有限，先到先得！"
      duration="10"
      backgroundColor="#ffebee"
    />
  </div>
</template>
<script>
import Marquee from './Marquee.vue';
export default {
  name: 'App',
  components: {
    Marquee
  }
};
</script>
<style>
.app-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}
</style>

代码解析

容器（.marquee-wrapper）：
- overflow: hidden 确保文字超出部分被隐藏
- white-space: nowrap 保证文字在一行显示
- position: relative 为内部绝对定位元素提供参考 .marquee-content）**：
- padding-left: 100% 将文字初始位置定位到容器右侧
- 使用 CSS 动画实现平滑的移动效果
- will-change: transform 提示浏览器优化动画性能
动画（@keyframes marquee）：
- 从 translateX(0)（右侧）到 translateX(-100%)（左侧）
- 线性动画确保速度均匀
- 无限循环实现持续滚动
Vue 组件特性：
- 通过 props 实现内容的动态配置
- 计算属性动态生成样式
- 响应式监听文字变化，自动调整动画速度

进阶功能：交互控制与动态内容

鼠标悬停暂停功能

通过添加 pauseOnHover 属性，实现鼠标悬停时暂停滚动的效果,提升用户体验：

// 在模板中添加事件监听
<div 
  class="marquee-content" 
  :style="contentStyle"
  :class="{ 'marquee-paused': isPaused }"
  @mouseenter="handleMouseEnter"
  @mouseleave="handleMouseLeave"
>
  {{ displayText }}
</div>

更新

支持运行时更新跑马灯内容，适用于实时

标签： #跑马 #灯Vue滚动