|
<style type="text/css">
.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;
}
</style>
<script type="text/javascript">
function startmarquee(lh,speed,delay,index){
/*
函數(shù)startmarquee的參數(shù)：
lh：文字一次向上滾動(dòng)的距離或高度,；
speed：滾動(dòng)速度,；
delay：滾動(dòng)停頓的時(shí)間間隔；
index：可以使封裝后的函數(shù)應(yīng)用于頁面當(dāng)中不同的元素,；
*/
var t;
var p=false;
var o=document.getElementById("marqueebox"+index);
//獲取文檔中的滾動(dòng)區(qū)域?qū)ο螅x值給變量o,；
o.innerHTML+=o.innerHTML; //對象中的實(shí)際內(nèi)容被復(fù)制了一份,，包含了兩個(gè)ul，當(dāng)然li標(biāo)簽也
//由原來的3行,，變?yōu)?行,；復(fù)制的目的在于給文字不間斷向上滾動(dòng)提供過渡。
o.onmouseover=function(){p=true}
//鼠標(biāo)滑過,，停止?jié)L動(dòng),；
o.onmouseout=function(){p=false}
//鼠標(biāo)離開，開始滾動(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)停止或開始,，取決于p傳來的布爾值；
}
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;
//對象o中的內(nèi)容之前被復(fù)制了一次,，所以它的滾動(dòng)高度,，其實(shí)是原來內(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)過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);
</script>
<body>
<div class="box" id="marqueebox0">
<ul>
<li style="background:#f8e2ac;">汝若</li>
<li style="background:#f5f5f5;">安好</li>
<li style="background:#ffe6ec;">便是晴天</li>
</ul>
</div>
<div class="box" id="marqueebox1">
<ul>
<li style="background:#f8e2ac;">晨鐘</li>
<li style="background:#f5f5f5;">暮鼓</li>
<li style="background:#ffe6ec;">安之若素</li>
</ul>
</div>
<script type="text/javascript">
function startmarquee(lh, speed, delay, index) {
var t;
var p = false;
var o = document.getElementById("marqueebox" + index);
o.innerHTML += o.innerHTML;
o.onmouseover = function () { p = true }
o.onmouseout = function () { p = false }
o.scrollTop = 0;
function start() {
t = setInterval(scrolling, speed);
if (!p) { o.scrollTop += 1; }
}
function scrolling() {
if (o.scrollTop % lh != 0) {
o.scrollTop += 1;
if (o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;
} else {
clearInterval(t);
setTimeout(start, delay);
}
}
setTimeout(start, delay);
}
startmarquee(25, 30, 3000, 0);
startmarquee(25, 40, 0, 1);
</script>
</body>
|
