当前位置：首页 > JavaScript

js实现跑马灯

2026-01-15 14:19:20JavaScript

实现跑马灯效果

使用HTML和JavaScript可以轻松实现跑马灯效果。以下是两种常见的实现方式：

HTML结构

<div id="marquee">
    <span>这是需要滚动的文本内容，可以根据实际需求调整长度和内容。</span>
</div>

使用CSS动画实现

通过CSS的animation属性配合@keyframes规则，可以创建平滑的跑马灯效果：

#marquee {
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
}

#marquee span {
    display: inline-block;
    animation: marquee 10s linear infinite;
}

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

使用JavaScript实现

通过JavaScript动态控制元素位置，实现更灵活的跑马灯效果：

js实现跑马灯

const marquee = document.getElementById('marquee');
const span = marquee.querySelector('span');
let position = marquee.offsetWidth;

function animate() {
    position--;
    if (-position >= span.offsetWidth) {
        position = marquee.offsetWidth;
    }
    span.style.transform = `translateX(${position}px)`;
    requestAnimationFrame(animate);
}

animate();

控制跑马灯速度

调整动画速度可以通过修改CSS动画的持续时间或JavaScript中的位移量：

CSS方式：

js实现跑马灯

#marquee span {
    animation-duration: 5s; /* 数值越小速度越快 */
}

JavaScript方式：

position -= 2; // 数值越大速度越快

响应式处理

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

function resetMarquee() {
    position = marquee.offsetWidth;
}

window.addEventListener('resize', resetMarquee);

暂停和继续功能

添加控制按钮来暂停和继续跑马灯：

<button id="toggle">暂停</button>

let isRunning = true;
const toggleBtn = document.getElementById('toggle');

toggleBtn.addEventListener('click', function() {
    isRunning = !isRunning;
    this.textContent = isRunning ? '暂停' : '继续';
    if (isRunning) animate();
});

function animate() {
    if (!isRunning) return;
    position--;
    if (-position >= span.offsetWidth) {
        position = marquee.offsetWidth;
    }
    span.style.transform = `translateX(${position}px)`;
    requestAnimationFrame(animate);
}

这些方法提供了灵活的实现方式，可以根据具体需求选择最适合的方案。CSS动画实现简单但控制有限，JavaScript实现更灵活但代码量稍多。