跑马灯代码公式：从入门到精通的全栈指南

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

<marquee direction="up" height="150" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">
    <ul>
        <li>新闻标题 1：公司年度大会召开</li>
        <li>新闻标题 2：新产品发布预告</li>
        <li>新闻标题 3：技术团队扩充计划</li>
    </ul>
</marquee>

<script>
    /
      实现无缝滚动
      @param {HTMLElement} container - 滚动容器
      @param {number} speed - 滚动速度
     /
    function startMarquee(container, speed = 2) {
        let scrollPos = 0;
        const content = container.querySelector('.content');
        const contentWidth = content.offsetWidth;
        // 复制一份内容以实现无缝
        content.innerHTML += content.innerHTML;
        function animate() {
            scrollPos += speed;
            // 当滚动距离超过一半（即原始内容宽度）时，重置
            if (scrollPos >= contentWidth) {
                scrollPos = 0;
            }
            content.style.transform = `translateX(-${scrollPos}px)`;
            requestAnimationFrame(animate);
        }
        animate();
    }
    // 初始化
    document.addEventListener('DOMContentLoaded', () => {
        const marquee = document.querySelector('.marquee-box');
        if (marquee) {
            let isPaused = false;
            marquee.addEventListener('mouseenter', () => isPaused = true);
            marquee.addEventListener('mouseleave', () => isPaused = false);
            // 修改后的动画循环以支持暂停
            function loop() {
                if (!isPaused) {
                    // 调用滚动逻辑
                    // ... (此处省略具体滚动逻辑，参考上方startMarquee)
                }
                requestAnimationFrame(loop);
            }
            loop();
        }
    });
</script>