当前位置：首页 > JavaScript

走马灯js实现滚动提示

2026-04-05 01:40:39JavaScript

走马灯效果实现方法

走马灯（Marquee）效果可以通过多种JavaScript方式实现，以下是几种常见的方法：

使用CSS动画实现基础滚动

通过CSS的@keyframes和animation属性可以创建平滑的滚动效果：

.marquee {
  white-space: nowrap;
  overflow: hidden;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

纯JavaScript实现可控滚动

走马灯js实现滚动提示

创建可控制速度和方向的JavaScript滚动：

function startMarquee(selector, speed) {
  const element = document.querySelector(selector);
  let position = 0;

  setInterval(() => {
    position -= 1;
    element.style.transform = `translateX(${position}px)`;

    if (position <= -element.scrollWidth) {
      position = element.clientWidth;
    }
  }, speed);
}

startMarquee('.marquee', 50);

响应式走马灯组件

走马灯js实现滚动提示

结合现代前端框架（如Vue/React）创建响应式组件：

// Vue示例
Vue.component('marquee', {
  template: `
    <div class="marquee-container" ref="container">
      <div class="marquee-content" :style="{ transform: `translateX(${position}px)` }">
        <slot></slot>
      </div>
    </div>
  `,
  data() {
    return { position: 0 }
  },
  mounted() {
    this.animate();
  },
  methods: {
    animate() {
      requestAnimationFrame(() => {
        this.position -= 1;
        if (this.position <= -this.$refs.container.scrollWidth) {
          this.position = this.$refs.container.clientWidth;
        }
        this.animate();
      });
    }
  }
});

高级功能实现

添加暂停、反向等交互功能：

class Marquee {
  constructor(element, options = {}) {
    this.element = element;
    this.speed = options.speed || 1;
    this.direction = options.direction || 'left';
    this.isPaused = false;

    this.init();
  }

  init() {
    this.cloneContent();
    this.animate();

    this.element.addEventListener('mouseenter', () => this.pause());
    this.element.addEventListener('mouseleave', () => this.resume());
  }

  cloneContent() {
    this.content = this.element.querySelector('.marquee-content');
    this.content.innerHTML += this.content.innerHTML;
  }

  animate() {
    if (this.isPaused) return;

    const currentPosition = parseInt(this.content.style.left || '0');
    let newPosition = currentPosition - this.speed;

    if (newPosition <= -this.content.scrollWidth/2) {
      newPosition = 0;
    }

    this.content.style.left = newPosition + 'px';
    requestAnimationFrame(() => this.animate());
  }

  pause() { this.isPaused = true; }
  resume() { this.isPaused = false; this.animate(); }
}

new Marquee(document.querySelector('.marquee'), { speed: 2 });