js跑马灯效果(用JavaScript实现文字滚动效果。)

什么是跑马灯效果

跑马灯效果（marquee）是指文字或图片在固定的区域内水平或垂直方向连续地滚动的动态效果。

跑马灯效果最早是在传统的电视和广告牌上应用的，现在随着互联网的普及，跑马灯效果也已在网页中广泛应用。很多网站在页面的头部或底部添加一个跑马灯效果，用于展示网站的最新活动、热门文章、特别推荐等信息。

HTML中实现跑马灯效果

在HTML中，实现跑马灯效果最简单的方法就是使用<marquee>标签。这个标签被用于包含需要滚动的文本或图片。

以下是一个最简单的跑马灯效果的实现：

<marquee>这是一段跑马灯效果的文本</marquee>

这段代码的结果就是在网页上出现了一段连续滚动的文本。不过需要注意的是，<marquee>标签在HTML5标准中已经被废除，不建议使用。

CSS中实现跑马灯效果

在CSS中，可以使用animation属性实现跑马灯效果。

首先，需要定义一个长条形的容器，用于包含需要滚动的文本。以下是一个例子：

<div class="marquee-container">
    <span class="marquee-text">这是一段跑马灯效果的文本</span>
</div>

然后，在CSS中，定义容器的样式和动画：

.marquee-container {
    overflow: hidden;    /* 隐藏容器外的内容 */
}
.marquee-text {
    position: relative;    /* 设置文本相对定位 */
    display: inline-block;    /* 让文本在一行中显示 */
    animation: marquee-scroll 10s linear infinite;    /* 定义动画 */
}
@keyframes marquee-scroll {
    0% {
        left: 100%;    /* 文本向右移出容器 */
    }
    100% {
        left: -100%;    /* 文本向左移出容器 */
    }
}

这段代码定义了一个marquee-scroll动画，在marquee-text元素上应用。动画周期为10秒，匀速线性运动，无限循环。在动画的起点和终点，文本分别向右和向左移动一个容器的宽度。

JavaScript中实现跑马灯效果

如果需要更加自定义的跑马灯效果（比如滚动的速度、滚动的方向、暂停和继续滚动等），可以使用JavaScript来实现。

以下是一个简单的纯JavaScript跑马灯效果示例：

<div id="marquee">这是一段跑马灯效果的文本</div>
<script>
let marquee = document.getElementById('marquee');
let marqueeText = marquee.innerText;
function playMarquee(direction, speed) {
    marquee.innerText += marqueeText;    // 将原始文本复制一遍
    let offset = 0;    // 初始偏移量
    let running = true;    // 是否在运行
    function step(timestamp) {
        if (!running) return;
        offset += (direction === 'left' ? -1 : 1) * speed;
        if (Math.abs(offset) >= marqueeText.length) {
            offset = 0;
        }
        marquee.style.setProperty('transform', 'translateX(' + offset + 'ch)');
        window.requestAnimationFrame(step);
    }
    marquee.addEventListener('mouseenter', function() {
        running = false;
    });
    marquee.addEventListener('mouseleave', function() {
        running = true;
        window.requestAnimationFrame(step);
    });
    window.requestAnimationFrame(step);
}
playMarquee('left', 1);    // 向左滚动，速度为1ch/s
</script>

这段代码定义了一个名为playMarquee的函数，接受两个参数：滚动方向（left或right）和滚动速度（以字符为单位）。调用该函数可以启动一个跑马灯滚动的过程。

在函数内部，首先将初始文本复制一遍，并计算出初始偏移量为0。然后，使用requestAnimationFrame函数实现连续滚动的效果。当鼠标移入跑马灯区域时，停止滚动；当鼠标移出时，恢复滚动。

总结

跑马灯效果是展示重要信息的一种方式，无论是在传统的媒体中，还是在互联网中都得到了广泛的应用。在HTML中可以使用<marquee>标签，但不建议使用；在CSS中可以使用animation属性实现；在JavaScript中可以更加自由地定制跑马灯效果。