当前位置：首页 > JavaScript

js实现滚滚屏

2026-02-02 22:22:26JavaScript

实现滚动字幕（滚滚屏）的JavaScript方法

滚动字幕效果可以通过多种方式实现，以下是几种常见的方法：

使用CSS动画结合JavaScript控制

js实现滚滚屏

// HTML结构
<div class="scrolling-text-container">
  <div class="scrolling-text">这里是需要滚动显示的文字内容</div>
</div>

// CSS样式
.scrolling-text-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scrolling-text {
  display: inline-block;
  animation: scroll 10s linear infinite;
}

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

// JavaScript控制
const textElement = document.querySelector('.scrolling-text');
textElement.addEventListener('mouseenter', () => {
  textElement.style.animationPlayState = 'paused';
});
textElement.addEventListener('mouseleave', () => {
  textElement.style.animationPlayState = 'running';
});

使用JavaScript定时器实现

function startScrolling(elementId, speed) {
  const element = document.getElementById(elementId);
  let position = 0;

  function scroll() {
    position--;
    element.style.transform = `translateX(${position}px)`;

    if (-position > element.scrollWidth) {
      position = element.parentElement.offsetWidth;
    }

    requestAnimationFrame(scroll);
  }

  // 控制速度
  const interval = setInterval(scroll, speed);

  return {
    stop: () => clearInterval(interval)
  };
}

// 使用示例
const scroller = startScrolling('scrolling-text', 20);

使用marquee标签（HTML原生，不推荐）

js实现滚滚屏

虽然HTML5已废弃marquee标签，但在某些场景下仍可使用：

<marquee behavior="scroll" direction="left" scrollamount="5">
  这里是滚动文字内容
</marquee>

实现垂直滚动效果

如果需要垂直滚动的效果，可以修改CSS动画或JavaScript逻辑：

// 垂直滚动CSS
@keyframes verticalScroll {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

// 垂直滚动JavaScript
function verticalScroll(elementId, speed) {
  const container = document.getElementById(elementId);
  const content = container.firstElementChild;
  let position = 0;

  function scroll() {
    position--;
    content.style.transform = `translateY(${position}px)`;

    if (-position > content.offsetHeight) {
      position = container.offsetHeight;
    }

    setTimeout(scroll, speed);
  }

  scroll();
}