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