js+div实现跑马灯效果，替代marquee实现无缝滚动

最新推荐文章于 2025-05-22 07:13:32 发布

原创最新推荐文章于 2025-05-22 07:13:32 发布 · 6.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#js跑马灯 #无缝滚动 #marquee

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript实现一个水平滚动的字幕效果。通过设置div元素的overflow属性和使用JavaScript控制scrollLeft属性，可以使内容在固定宽度的窗口中水平滚动。文章包含完整的HTML、CSS和JS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

 .pad_right {
            padding-left: 15px;
        }
        #scroll_div {
            height: 26px;
            line-height: 26px;
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
            background: #ccc;
            color: #e20f0b;
        }
        #scroll_begin,
        #scroll_end {
            display: inline;
        }

html

 <div id="scroll_div" class="fl">
     <div id="scroll_begin">
          <span class="pad_right">12121212</span><span class="pad_right">12121212</span><span class="pad_right">12121212</span><span class="pad_right">12121212</span>
     </div>
     <div id="scroll_end"></div>
 </div>

注意 scroll_begin div内为显示内容，要是水平展示

js

var speed = 60;
var timer = null;
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");

if (scroll_begin.offsetWidth > scroll_div.offsetWidth)//内容长度不够只显示一条且不滚动，若想滚动把内容多复制几条让内容超过滚动窗长度即可
    scroll_end.innerHTML = scroll_begin.innerHTML;

function Marquee() {
     if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
          scroll_div.scrollLeft -= scroll_begin.offsetWidth;
     else
          scroll_div.scrollLeft++;
 }
timer= setInterval(Marquee, speed);
scroll_div.onmouseover = function () {
     clearInterval(timer);
}
scroll_div.onmouseout = function () {
     timer= setInterval(Marquee, speed);
}

注意把js代码放html下面