前端实现跑马灯

<!--
 * @Author: wangrui
 * @Description: 跑马灯
 * @Date: 2024-11-08 11:45:17
 * @LastEditors: Do not edit
-->
<script setup lang="ts">
import { ref, watchEffect,withDefaults } from 'vue';
const props = withDefaults(defineProps<{
    notice: string[];
    duration?: number; 
    marqueeWrapperStyle?:Record<string, string>;
    marqueeItemStyle?:Record<string, string>;
}>(), {
    marqueeWrapperStyle: () => ({}),
    marqueeItemStyle: () => ({}),
    duration: 20
});

const MarqueeItemNameArr = ref(['origin', 'copy']);
const speed = ref(2);

const initSpeed = () => {
  if (!props.notice.length) {
    return false
 };
  const str = props.notice.join('').length;
  speed.value = (str / 40) * props.duration;
};

watchEffect(() => {
  if (props.notice.length) {
    initSpeed();
  }
});
</script>

<template>
    <div class="marquee" :style="marqueeWrapperStyle">
      <ol
        class="marquee-wrapper"
        :style="{
          animationDuration: `${speed}s`,
          WebkitAnimationDuration: `${speed}s`,
        }"
      >
        <li
          v-for="name in MarqueeItemNameArr"
          :key="`item-${name}`"
          class="marquee-item"
        >
          <div
            v-for="(item, index) in notice"
            :key="`item-${name}-${index}`"
            class="item"
            :style="marqueeItemStyle"
          >
            {{ item }}
          </div>
        </li>
      </ol>
    </div>
  </template>
<style scoped lang="scss">
ol,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.marquee {
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  -webkit-mask-image: 
    linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0)),
    linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left, right;
  mask-image: 
    linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0)),
    linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: left, right;
}
.marquee-wrapper {
  height: inherit;
  margin: 0;
  padding: 0;
  will-change: transform;
  transform: translateZ(0);
  white-space: nowrap;
  -webkit-animation: marquee-ani linear infinite;
  animation: marquee-ani linear infinite;
}

.marquee-item {
  height: inherit;
  display: inline-block;
}

.item {
  margin-right: 40px;
  display: inline-block;
  font-size: 32px;
  color: #fff;
}
@-webkit-keyframes marquee-ani {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@keyframes marquee-ani {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}
</style>
<think>嗯,用户想在前端实现跑马灯效果,我得先理解跑马灯是什么。跑马灯就是文字或者图片在页面上自动滚动,常见于公告或者广告。根据用户提供的引用,有几个方法可以实现,比如用CSS的动画或者JavaScript。 首先,引用[2]提到用CSS实现文字跑马灯,主要是利用marquee标签或者CSS动画。不过marquee标签已经过时了,可能不被推荐使用,所以应该用CSS动画更合适。比如使用@keyframes和transform属性来移动文本。比如横向滚动的话,可以让文字从右向左移动,通过translateX来改变位置。而竖向滚动可能需要改变translateY或者使用margin-top的变化。 然后引用[1]提到JavaScript实现复杂的跑马灯,可能需要动态控制元素的位移,比如使用setInterval或者requestAnimationFrame来不断更新元素的位置。这样灵活性更高,可以处理更复杂的效果,比如暂停、变速或者交互操作。 引用[3]和[4]中的示例可能涉及到更多的样式调整,比如首字母放大或者选择器的使用,但核心还是动画的实现。用户需要示例代码,所以应该结合CSS和JavaScript两种方法给出例子。 用户可能需要知道不同方法的优缺点,比如CSS实现简单但控制有限,JavaScript更灵活但代码复杂。另外,还要考虑兼容性和性能问题,CSS动画通常性能更好,因为可以利用硬件加速。 另外,横向和竖向滚动的实现方式不同,横向用translateX,竖向可能需要改变垂直方向的属性。循环滚动的话,可能需要让内容无缝衔接,比如复制一份内容,当滚动到一半时重置位置,这样看起来是无限循环的。 还要注意容器设置overflow: hidden,避免内容溢出。文字不换行用white-space: nowrap。对于竖向滚动,可能需要使用vertical-align或者flex布局来调整内容的位置。 可能的问题是如何处理动态内容,比如从后端获取的数据如何实时更新到跑马灯中。这时候JavaScript更适合,可以在数据变化时重新启动动画或者调整内容长度。 总结一下,回答应该包括CSS实现和JavaScript实现两种方法,分别给出横向和竖向的示例代码,并说明优缺点,最后生成相关问题帮助用户深入理解。</think>### 前端跑马灯效果的实现方法 跑马灯效果(文字或图片自动滚动)可通过 **CSS动画** 或 **JavaScript动态控制** 实现,以下是具体方法及示例代码: --- #### 一、CSS动画实现(推荐) ##### 1. 横向跑马灯 ```html <div class="marquee-container"> <div class="marquee-content">这是一条需要横向滚动的文字内容</div> </div> <style> .marquee-container { width: 300px; 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> ``` **原理**:通过`transform: translateX`实现水平位移,`infinite`保证循环滚动[^2]。 ##### 2. 竖向跑马灯 ```html <div class="vertical-marquee"> <p>第一行内容</p> <p>第二行内容</p> </div> <style> .vertical-marquee { height: 60px; overflow: hidden; } .vertical-marquee p { animation: vertical 8s linear infinite; } @keyframes vertical { 0% { transform: translateY(100%); } 100% { transform: translateY(-100%); } } </style> ``` --- #### 二、JavaScript动态控制 ##### 1. 基础横向滚动 ```javascript function startMarquee(containerId, speed = 50) { const container = document.getElementById(containerId); const content = container.innerHTML; container.innerHTML = content + content; // 复制内容实现无缝滚动 let position = 0; function scroll() { position--; if (position <= -container.scrollWidth / 2) { position = 0; } container.style.transform = `translateX(${position}px)`; requestAnimationFrame(scroll); } scroll(); } // 调用:<div id="marqueeBox">滚动内容</div> // startMarquee('marqueeBox'); ``` **优势**:可动态调整速度、暂停控制[^1]。 ##### 2. 交互式跑马灯(带暂停) ```html <div class="interactive-marquee" onmouseover="pauseMarquee()" onmouseout="resumeMarquee()"> 鼠标悬停暂停 </div> <script> let animationId; function startInteractiveMarquee() { const element = document.querySelector('.interactive-marquee'); let position = 0; function animate() { position -= 1; element.style.transform = `translateX(${position}px)`; animationId = requestAnimationFrame(animate); } animate(); } function pauseMarquee() { cancelAnimationFrame(animationId); } function resumeMarquee() { startInteractiveMarquee(); } startInteractiveMarquee(); </script> ``` --- #### 三、技术选型对比 | 方法 | 优点 | 缺点 | |-----------|---------------------|---------------------| | CSS动画 | 性能高、代码简洁 | 动态控制能力有限 | | JavaScript | 灵活控制(暂停、变速、交互) | 需手动处理性能优化 | | `<marquee>`标签 | 原生标签简单实现(已过时,不推荐) | 兼容性差、无法精细控制动画效果[^2] | ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值