快捷導(dǎo)航

淺析js 文字滾動(dòng)效果

更新時(shí)間：2010年05月22日 21:59:58 作者：

文字滾動(dòng)顯示，是網(wǎng)頁企業(yè)公告，文字鏈廣告常用的一種效果，說不定在什么時(shí)候你就能看到它。

這種效果在今后的web發(fā)展中是不是常用或者是否依然被設(shè)計(jì)師們所青睞，從技術(shù)層面看并不是最重要的，了解它的實(shí)現(xiàn)原理，對(duì)自身前端技術(shù)的提高，會(huì)有很大的幫助，世間萬物，萬變不離其宗，掌握了它的運(yùn)行規(guī)律，你才不會(huì)被其花花外表所迷惑，甚至你可以在掌握其規(guī)律的前提下，運(yùn)行相關(guān)技術(shù)，創(chuàng)造出新的效果來。下面看看它的實(shí)現(xiàn)過程：
1.html

復(fù)制代碼代碼如下:

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

2.css

復(fù)制代碼代碼如下:

 
.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; 
} 

3.js

復(fù)制代碼代碼如下:

 
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ū)ο?，賦值給變量o； 
o.innerHTML+=o.innerHTML; //對(duì)象中的實(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; 
//對(duì)象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); 
//不間斷連續(xù) 