DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 圖片不間斷滾動的特效代碼詳細講解
圖片不間斷滾動的特效代碼詳細講解
編輯:關於JavaScript     

我很久前在YAHOO上扣的代碼,兼容性很好,在Windows下的主流浏覽器中可以正常運行。

大家先不要急著下載代碼,你隨時都可以下,我們來分析下代碼(代碼中我已經寫了很詳細的注釋),要之其所以然,在解讀別人的代碼中學習提高自己,然後可以靈活運用,這個才是我將這個效果貼出來的主要目的,代碼如下:

scrollver.js

scrollVertical.prototype.scrollArea=null;      // 滾動的區域
scrollVertical.prototype.scrollMsg=null;       // 要滾動的內容
scrollVertical.prototype.unitHeight=0;         // 單獨一行滾動內容的高度(程序中通過過的要滾動行的一個節點的offsetHeight獲得)
scrollVertical.prototype.msgHeight=0;          // 整個滾動內容的高度
scrollVertical.prototype.copyMsg=null;         // 復制滾動內容(程序中使用復制scrollMsg.innerHTML來獲得的)
scrollVertical.prototype.scrollValue=0;        // 滾動的值
scrollVertical.prototype.scrollHeight=0;       // 滾動高度
scrollVertical.prototype.isStop=true;          // 停止滾動
scrollVertical.prototype.isPause=false;        // 暫停滾動
scrollVertical.prototype.scrollTimer=null;     // 滾動計時器
scrollVertical.prototype.speed=2000;           // (默認)滾動的時間間隔2秒
/**
* @method isMoz - 判斷是否為Mozilla系列浏覽器
*/
scrollVertical.prototype.isMoz = function(){
    return navigator.userAgent.toLowerCase().indexOf('gecko') > 0;
};
/**
* @method play - 滾動信息的處理方法(函數)
* @param {Object} o - 滾動類
*/
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(){
        // 如果已經開始計時(間隔時間執行向上滾動),
        // 就停止它(以免無限制執行,耗系統資源)。
        if (o.scrollTimer) {
            clearTimeout(o.scrollTimer);
        }
        // 如果暫停了滾動(鼠標放到了滾動層上)
        // 開始以10毫秒的時間間隔運行滾動   
        if (o.isPause) {
            o.scrollTimer = setTimeout(anim, 10);
            return;
        }
        // 當顯示完所有信息後(這時滾動的距離就等於要滾動信息的高度msg_h)
        // 這時又重新開始滾動,將滾動距離清零
        if (msg_h - o.scrollValue <= 0) {
        &nb

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved