中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

我很久前在YAHOO上扣的代碼，兼容性很好，在Windows下的主流瀏覽器中可以正常運(yùn)行。

演示地址：index.html

代碼下載：scrollpic.rar

大家先不要急著下載代碼，你隨時(shí)都可以下，我們來(lái)分析下代碼（代碼中我已經(jīng)寫(xiě)了很詳細(xì)的注釋?zhuān)�，要之其所以然，在解讀別人的代碼中學(xué)習(xí)提高自己，然后可以靈活運(yùn)用，這個(gè)才是我將這個(gè)效果貼出來(lái)的主要目的，代碼如下：

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)容的高度（程序中通過(guò)過(guò)的要滾動(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來(lái)獲得的）
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)類(lèi)
*/
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)開(kāi)始計(jì)時(shí)（間隔時(shí)間執(zhí)行向上滾動(dòng)），
        // 就停止它（以免無(wú)限制執(zhí)行，耗系統(tǒng)資源）。
        if (o.scrollTimer) {
            clearTimeout(o.scrollTimer);
        }
        // 如果暫停了滾動(dòng)（鼠標(biāo)放到了滾動(dòng)層上）
        // 開(kāi)始以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í)又重新開(kāi)始滾動(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秒中，然后再開(kāi)始執(zhí)行下依次滾動(dòng)。
        if (o.scrollHeight % s_area.offsetHeight == 0) {
            o.scrollTimer = setTimeout(anim, o.speed);
        }
        else {
            // 在兩行內(nèi)容之間過(guò)度滾動(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)簽名稱(chēng)（tagName）
*/
function scrollVertical(disp, msg, tg){
    // 給在之前定義的this.scrollArea付值
    if (typeof(disp) == 'string') {
        // 如果disp給的是節(jié)點(diǎn)的ID，通過(guò)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;
    }
   
    // 為了開(kāi)發(fā)方便，
    // 不用一直寫(xiě)this.scrollMsg這么常的名字，
    // 將兩個(gè)對(duì)象付給局部變量
    var s_msg = this.scrollMsg;
    var s_area = this.scrollArea;
   
    // 如果沒(méi)有給定一行的識(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í)就是通過(guò)復(fù)制信息，
     * 并將復(fù)制的信添加到原始信息后
     * 當(dāng)原始信息滾動(dòng)顯示完成，就接著滾動(dòng)顯示復(fù)制的信息
     * 但給人的錯(cuò)覺(jué)是，我們看到信息連續(xù)不斷的顯示
     */
    // 創(chuàng)建復(fù)制內(nèi)容節(jié)點(diǎn)
    var copydiv = document.createElement('div');
    // 這個(gè)地方感覺(jué)有點(diǎn)嵌妥
    // 直接使用element.id的方式，不過(guò)看上去，主流的瀏覽器都支持
    // 標(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寫(xiě)到
    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;
    // 開(kāi)始執(zhí)行滾動(dòng)方法
    this.play(this);
}

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

出處：藍(lán)色理想
責(zé)任編輯：moby

上一頁(yè) 下一頁(yè) 不間斷滾動(dòng)圖片Javascript特效講解 [2]

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。