当前位置：首页 > JavaScript

js实现滚滚屏

2026-04-07 16:10:13JavaScript

实现滚动字幕效果

使用JavaScript实现滚动字幕（俗称"滚滚屏"）可以通过操作DOM元素的样式或位置来实现。以下是几种常见方法：

使用CSS动画结合JavaScript控制

通过CSS的@keyframes定义动画，JavaScript控制动画的启停：

<div id="scrollText" style="white-space: nowrap; overflow: hidden;">
  这里是需要滚动显示的文本内容...
</div>

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

const scrollElement = document.getElementById('scrollText');
scrollElement.style.animation = 'scrolling 10s linear infinite';

纯JavaScript实现

通过定时器不断修改元素的marginLeft或transform属性：

const element = document.getElementById('scrollText');
let position = 0;

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

  if (-position >= element.scrollWidth) {
    position = element.clientWidth;
  }
  requestAnimationFrame(scroll);
}

scroll();

使用marquee标签（不推荐）

HTML原生提供了<marquee>标签，虽然简单但已过时：

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

优化性能的实现

对于大量文本或需要高性能的场景，可以使用canvas绘制：

const canvas = document.getElementById('scrollCanvas');
const ctx = canvas.getContext('2d');
let textPos = canvas.width;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText('滚动文本内容', textPos, 50);

  textPos -= 2;
  if (textPos < -ctx.measureText('滚动文本内容').width) {
    textPos = canvas.width;
  }

  requestAnimationFrame(draw);
}

ctx.font = '20px Arial';
draw();

暂停/继续控制

为滚动文本添加交互控制：

let isScrolling = true;
const scrollElement = document.getElementById('scrollText');

scrollElement.addEventListener('mouseenter', () => {
  scrollElement.style.animationPlayState = 'paused';
});

scrollElement.addEventListener('mouseleave', () => {
  scrollElement.style.animationPlayState = 'running';
});

响应式处理

确保在不同屏幕尺寸下正常工作：

js实现滚滚屏

function resizeHandler() {
  const container = document.getElementById('scrollContainer');
  const text = document.getElementById('scrollText');

  text.style.animationDuration = `${container.offsetWidth / 50}s`;
}

window.addEventListener('resize', resizeHandler);
resizeHandler();

以上方法可根据具体需求选择或组合使用。CSS动画方案性能较好但控制粒度较粗，JavaScript方案更灵活但需要注意性能优化。