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

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下面