我們來分析下代碼（代碼中我已經(jīng)寫了很詳細(xì)的注釋），要之其所以然，在解讀別人的代碼中學(xué)習(xí)提高自己，然后可以靈活運(yùn)用，這個(gè)才是我將這個(gè)效果貼出來的主要目的，代碼如下：

scrollver.js

scrollVertical.prototype.scrollArea=null;      // 滾動(dòng)的區(qū)域  
scrollVertical.prototype.scrollMsg=null;       // 要滾動(dòng)的內(nèi)容  
scrollVertical.prototype.unitHeight=0;         // 單獨(dú)一行滾動(dòng)內(nèi)容的高度（程序中通過過的要滾動(dòng)行的一個(gè)節(jié)點(diǎn)的offsetHeight獲得）   
scrollVertical.prototype.msgHeight=0;          // 整個(gè)滾動(dòng)內(nèi)容的高度  
scrollVertical.prototype.copyMsg=null;         // 復(fù)制滾動(dòng)內(nèi)容（程序中使用復(fù)制scrollMsg.innerHTML來獲得的）  
scrollVertical.prototype.scrollValue=0;        // 滾動(dòng)的值  
scrollVertical.prototype.scrollHeight=0;       // 滾動(dòng)高度  
scrollVertical.prototype.isStop=true;          // 停止?jié)L動(dòng)  
scrollVertical.prototype.isPause=false;        // 暫停滾動(dòng)   
scrollVertical.prototype.scrollTimer=null;     // 滾動(dòng)計(jì)時(shí)器  
scrollVertical.prototype.speed=2000;           // (默認(rèn))滾動(dòng)的時(shí)間間隔2秒  
/**  
* @method isMoz - 判斷是否為Mozilla系列瀏覽器  
*/   
scrollVertical.prototype.isMoz = function(){  
    return navigator.userAgent.toLowerCase().indexOf('gecko') > 0;  
};  
/**  
* @method play - 滾動(dòng)信息的處理方法（函數(shù)）  
* @param {Object} o - 滾動(dòng)類  
*/   
scrollVertical.prototype.play = function(o){  
    var s_msg = o.scrollMsg;  
    var c_msg = o.copyMsg;  
    var s_area = o.scrollArea;  
    var msg_h = o.msgHeight;  
      
    var anim = function(){  
        // 如果已經(jīng)開始計(jì)時(shí)（間隔時(shí)間執(zhí)行向上滾動(dòng)），  
        // 就停止它（以免無限制執(zhí)行，耗系統(tǒng)資源）。  
        if (o.scrollTimer) {   
            clearTimeout(o.scrollTimer);  
        }  
        // 如果暫停了滾動(dòng)（鼠標(biāo)放到了滾動(dòng)層上）  
        // 開始以10毫秒的時(shí)間間隔運(yùn)行滾動(dòng)      
        if (o.isPause) {  
            o.scrollTimer = setTimeout(anim, 10);  
            return;  
        }  
        // 當(dāng)顯示完所有信息后（這時(shí)滾動(dòng)的距離就等于要滾動(dòng)信息的高度msg_h）  
        // 這時(shí)又重新開始滾動(dòng)，將滾動(dòng)距離清零  
        if (msg_h - o.scrollValue <= 0) {  
            o.scrollValue = 0;  
        }  
        else {  
            o.scrollValue += 1;  
            o.scrollHeight += 1;  
        }  
        // 根據(jù)瀏覽器的不同，處理滾動(dòng)  
        if (o.isMoz) { // Mozilla引擎瀏覽器  
            s_area.scrollTop = o.scrollValue;  
        }  
        else { // 其余的瀏覽器則使用控制CSS樣式處理滾動(dòng)  
            s_msg.style.top = -1 * o.scrollValue + "px";  
            c_msg.style.top = (msg_h - o.scrollValue) + "px";  
        }  
        // 滾動(dòng)高度等于顯示滾動(dòng)區(qū)域高度時(shí)（滾動(dòng)完一行，一行內(nèi)容全部顯示）  
        // 暫停4秒中，然后再開始執(zhí)行下依次滾動(dòng)。  
        if (o.scrollHeight % s_area.offsetHeight == 0) {  
            o.scrollTimer = setTimeout(anim, o.speed);  
        }  
        else {  
            // 在兩行內(nèi)容之間過度滾動(dòng)時(shí)，每10豪秒上升1px  
            o.scrollTimer = setTimeout(anim, 10);  
        }  
    };  
    // 執(zhí)行滾動(dòng)  
    anim();  
};  
/**  
* scrollVertical 垂直滾動(dòng)的構(gòu)造函數(shù)  
* @param {Object} disp   - 必須 顯示滾動(dòng)區(qū)域的DOM節(jié)點(diǎn)（或節(jié)點(diǎn)ID）   
* @param {Object} msg    - 必須 被顯示的信息的DOM節(jié)點(diǎn)（或節(jié)點(diǎn)ID）  
* @param {string} tg     - 可選 以什么標(biāo)記為一行的標(biāo)簽名稱（tagName）  
*/ 
function scrollVertical(disp, msg, tg){  
    // 給在之前定義的this.scrollArea付值  
    if (typeof(disp) == 'string') {  
        // 如果disp給的是節(jié)點(diǎn)的ID，通過document.getElementById獲取該節(jié)點(diǎn)  
        // 然后付值給this.scrollArea  
        this.scrollArea = document.getElementById(disp);  
    }  
    else {  
        // 如果是DOM節(jié)點(diǎn)，直接付給this.scrollArea  
        this.scrollArea = disp;  
    }  
    // 以給this.scrollArea相同的方法給this.scrollMsg付值  
    if (typeof(msg) == 'string') {  
        this.scrollMsg = document.getElementById(msg);  
    }  
    else {  
        this.scrollMsg = msg;  
    }  
      
    // 為了開發(fā)方便，  
    // 不用一直寫this.scrollMsg這么常的名字，  
    // 將兩個(gè)對(duì)象付給局部變量  
    var s_msg = this.scrollMsg;  
    var s_area = this.scrollArea;  
      
    // 如果沒有給定一行的識(shí)別標(biāo)簽，  
    // 默認(rèn)將li標(biāo)簽認(rèn)為是一行的標(biāo)簽  
    // 所以上面介紹的，tag參數(shù)是可選的  
    if (!tg) {  
        var tg = 'li';  
    }  
      
    // 獲取單行的高度  
    // 獲取到***(s_msg.getElementsByTagName(tg)[0])tg(一行的標(biāo)簽)的高度，作為單行的高度  
    this.unitHeight = s_msg.getElementsByTagName(tg)[0].offsetHeight;  
    // 獲取整個(gè)信息框的高度  
    // 公式為 單行高度（unitHeight）*行數(shù)（s_msg.getElementsByTagName(tg).length，顯示信息中包含多少個(gè)tg(行)標(biāo)簽）  
    this.msgHeight = this.unitHeight * s_msg.getElementsByTagName(tg).length;  
    /*   
     * 復(fù)制要顯示的信息：  
     * 連續(xù)滾動(dòng)的實(shí)現(xiàn)其實(shí)就是通過復(fù)制信息，  
     * 并將復(fù)制的信添加到原始信息后  
     * 當(dāng)原始信息滾動(dòng)顯示完成，就接著滾動(dòng)顯示復(fù)制的信息  
     * 但給人的錯(cuò)覺是，我們看到信息連續(xù)不斷的顯示  
     */ 
    // 創(chuàng)建復(fù)制內(nèi)容節(jié)點(diǎn)  
    var copydiv = document.createElement('div');  
    // 這個(gè)地方感覺有點(diǎn)嵌妥  
    // 直接使用element.id的方式，不過看上去，主流的瀏覽器都支持  
    // 標(biāo)準(zhǔn)的DOM Core方法：  
    // copydiv.setAttribute('id',s_area.id + "_copymsgid")  
    copydiv.id = s_area.id + "_copymsgid";  
    // 復(fù)制原始的信息  
    // 將原始的信息s_msg中的內(nèi)容，直接用innerHTML寫到  
    copydiv.innerHTML = s_msg.innerHTML;  
    // 設(shè)置復(fù)制信息節(jié)點(diǎn)的高度  
    copydiv.style.height = this.msgHeight + "px";  
    // 將復(fù)制節(jié)點(diǎn)添加到原始接點(diǎn)（scrollMsg）后  
    // 其實(shí)實(shí)現(xiàn)的方法就是將復(fù)制信息節(jié)點(diǎn)（copydiv）添家到顯示區(qū)域的節(jié)點(diǎn)（scrollArea）中  
    s_area.appendChild(copydiv);  
      
    this.copyMsg = copydiv;  
    // 開始執(zhí)行滾動(dòng)方法  
    this.play(this);  
}  
 

我在腳本的注釋中已經(jīng)說了這個(gè)效果的實(shí)現(xiàn)原理，而實(shí)現(xiàn)一個(gè)效果的關(guān)鍵就是在于運(yùn)用setTimeout方法和clearTimeout方法。

setTimeout(func,time)

setTimeout是window對(duì)象的一個(gè)方法，所以如果要是看到這么寫window.setTimeout你不要感到奇怪，我們平時(shí)一般都省略了window。

setTimeout方法接受兩個(gè)參數(shù)：
func - 在指定時(shí)間間隔內(nèi)要執(zhí)行的函數(shù)；
time - 執(zhí)行函數(shù)的時(shí)間間隔（以毫秒為單位，1000毫秒等于1秒）

我一開始沒有解釋setTimeout的功能，而是先說了兩個(gè)參數(shù)的意思，我想大家看了后就會(huì)有所了解，setTimeout的功能就是：設(shè)置定時(shí)器，在一段時(shí)間之后執(zhí)行指定的代碼。

不如本例中的：

setTimeout(anim, o.speed);

也許你有看過類似的寫法：

function dosomething(){  
    // do something  
}  
setTimeOout('dosomething',1000); 

個(gè)人建議不要這么寫，是這樣的代碼的可讀性太差，雖然也可以正常執(zhí)行。相信你看到的類似的代碼也是很久前的東西了。如果你還在新買的某本書中看到這樣的寫法，我想你可能很不幸買了本爛書?，F(xiàn)在一般我們都這么做：

function whatWeDoNow(){  
    var str = 'this is what we do now';  
    if(doalert) {  
       clearTimeout(doalert)  
    }     
    var doalert = setTimeout(function(){  
       alert(str);  
    },1000);  
} 

而且不知道你發(fā)現(xiàn)沒有，這么寫還有一個(gè)好處，你的function還可以接受其他的參數(shù)，比如這里我們可以接受whatWeDoNow()函數(shù)中的局部變量。如果你再結(jié)合閉包的使用，好處會(huì)更顯而易見。

剛才說的一點(diǎn)應(yīng)該說是一個(gè)不好的使用setTimeout的習(xí)慣。呵呵，接下來我還要說的一個(gè)更不好的使用習(xí)慣就是只使用setTimeout()方法，而不使用clearTimeout()方法。

clearTimeout(itimeoutid)

clearTimeout()方法的功能是停止定時(shí)器，大家看上面的代碼：

clearTimeout(o.scrollTimer);

Timer（定時(shí)器），夠直接吧。那么為什么要停止定時(shí)器？什么時(shí)候停止呢？

為什么要停，我想用個(gè)反問：能一直不停嗎，你的機(jī)器受得了嗎？這里我想應(yīng)該說說我們使用setTimeout的目的，我們通常使用它來實(shí)現(xiàn)像本例這 樣的動(dòng)畫效果。需要在很短的時(shí)間內(nèi)連續(xù)不斷的執(zhí)行定時(shí)器，當(dāng)然它是要占資源的啊。想想，只是不斷的創(chuàng)建，而且往往我們做的處理，在1秒中內(nèi)會(huì)執(zhí)行很多次函 數(shù)，一兩次還好，上百上千次，而且一個(gè)復(fù)雜些的動(dòng)畫，執(zhí)行很短的時(shí)間內(nèi)幾萬次也不是沒有可能事情。你想想，如果我們不在每執(zhí)行完一次后，銷毀它。要是再加 上定時(shí)器執(zhí)行的函數(shù)又是個(gè)比較NB點(diǎn)的運(yùn)算，你的寶貴的系統(tǒng)資源...，呵呵！

所以應(yīng)該向我給的例子中那樣，記得在每次執(zhí)行了定時(shí)器后停止（銷毀，釋放資源）它。

function whatWeDoNow(){  
    var str = 'this is what we do now';  
    if(doalert) {  
       clearTimeout(doalert); // clear  
    }     
    var doalert = setTimeout(function(){  
       alert(str);  
    },1000);  
}  
if (o.scrollTimer) {   
    clearTimeout(o.scrollTimer); // clear  
} 

呵呵，其實(shí)銷毀的方法很簡(jiǎn)單，就是在每次創(chuàng)建定時(shí)器前，判斷是否已經(jīng)創(chuàng)建了訂時(shí)器，就像特效例子中的

if (o.scrollTimer) {   
    clearTimeout(o.scrollTimer); // clear  
}  
....  
....  
if (o.scrollHeight % s_area.offsetHeight == 0) {  
    o.scrollTimer = setTimeout(anim, o.speed);  
}  
else {  
    o.scrollTimer = setTimeout(anim, 10);  
} 

是不是一個(gè)很流暢的循環(huán)？現(xiàn)在大家應(yīng)該知道了，為什么要clearTimeout和何時(shí)clearTimeout了嗎？


【編輯推薦】

1. 不唐突的JavaScript的七條準(zhǔn)則
2. JavaScript中的Object到底是什么
3. JavaOne 2009第三天：微軟與Sun/Oracle攜手并進(jìn)
4. 開發(fā)高可移植性J2ME的軟件
5. Java虛擬機(jī)（JVM）中的內(nèi)存設(shè)置詳解