<div class="box" id="marqueebox0">
<ul>
<li style="background:#f8e2ac;">第一行</li>
<li style="background:#f5f5f5;">第二行</li>
<li style="background:#ffe6ec;">第三行</li>
</ul>
</div>

.box{
width:150px;
height:25px;
line-height:25px;
border:#bbb 1px solid;
overflow:hidden;
}
.box ul{margin:0; padding:0}
.box li{
height:25px;
line-height:25px;
font-size:12px;
text-align:center;
list-style-type:none;
}

function startmarquee(lh,speed,delay,index){
/*
函數(shù)startmarquee的參數(shù)：
lh：文字一次向上滾動(dòng)的距離或高度；
speed：滾動(dòng)速度；
delay：滾動(dòng)停頓的時(shí)間間隔；
index：可以使封裝后的函數(shù)應(yīng)用于頁(yè)面當(dāng)中不同的元素；
*/
var t;
var p=false;
var o=document.getElementById("marqueebox"+index);
//獲取文檔中的滾動(dòng)區(qū)域?qū)ο?，賦值給變量o；
o.innerHTML+=o.innerHTML; //對(duì)象中的實(shí)際內(nèi)容被復(fù)制了一份，包含了兩個(gè)ul，當(dāng)然li標(biāo)簽也
由原來(lái)的3行，變?yōu)?行；復(fù)制的目的在于給文字不間斷向上滾動(dòng)提供過(guò)渡。
o.onmouseover=function(){p=true}
//鼠標(biāo)滑過(guò)，停止?jié)L動(dòng)；
o.onmouseout=function(){p=false}
//鼠標(biāo)離開(kāi)，開(kāi)始滾動(dòng)；p是true還是false直接影響到下面start()函數(shù)的執(zhí)行；
o.scrollTop = 0;
//文字內(nèi)容頂端與滾動(dòng)區(qū)域頂端的距離，初始值為0；
function start(){
t=setInterval(scrolling,speed); //每隔一段時(shí)間，setInterval便會(huì)執(zhí)行一次
scrolling函數(shù)；speed越大，滾動(dòng)時(shí)間間隔越大，滾動(dòng)速度越慢；
if(!p){ o.scrollTop += 1;}
//滾動(dòng)停止或開(kāi)始，取決于p傳來(lái)的布爾值；
}
function scrolling(){
if(o.scrollTop%lh!=0){
//如果不被整除，即一次上移的高度達(dá)不到lh，則內(nèi)容會(huì)繼續(xù)往上滾動(dòng)；
o.scrollTop += 1;
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
//對(duì)象o中的內(nèi)容之前被復(fù)制了一次，所以它的滾動(dòng)高度，其實(shí)是原來(lái)內(nèi)容的兩倍高度；
當(dāng)內(nèi)容向上滾動(dòng)到scrollHeight/2的高度時(shí)，全部3行文字已經(jīng)顯示了一遍，至此整塊內(nèi)容
scrollTop歸0；再等待下一輪的滾動(dòng)，從而達(dá)到文字不間斷向上滾動(dòng)的效果；
}else{
clearInterval(t);
//否則清除t，暫停滾動(dòng)
setTimeout(start,delay);
//經(jīng)過(guò)delay間隔后，啟動(dòng)start() 再連續(xù)滾動(dòng)
}
}
setTimeout(start,delay);
//第一次啟動(dòng)滾動(dòng)；setTimeout會(huì)在一定的時(shí)間后執(zhí)行函數(shù)start()，且只執(zhí)行一次
}
//傳遞參數(shù)
startmarquee(25,30,3000,0);
//帶停頓效果
startmarquee(25,40,0,1);
//不間斷連續(xù)