圖片不間斷滾動的特效代碼詳細講解

2024-07-21 02:04:26

字體：大中小

來源：轉載

供稿：網友

我很久前在yahoo上扣的代碼，兼容性很好，在windows下的主流瀏覽器中可以正常運行。

演示地址：index.html

代碼下載：scrollpic.rar

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

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) {
            o.scrollvalue = 0;
        }
        else {
            o.scrollvalue += 1;
            o.scrollheight += 1;
        }
        // 根據瀏覽器的不同，處理滾動
        if (o.ismoz) { // mozilla引擎瀏覽器
            s_area.scrolltop = o.scrollvalue;
        }
        else { // 其余的瀏覽器則使用控制css樣式處理滾動
            s_msg.style.top = -1 * o.scrollvalue + "px";
            c_msg.style.top = (msg_h - o.scrollvalue) + "px";
        }
        // 滾動高度等于顯示滾動區域高度時（滾動完一行，一行內容全部顯示）
        // 暫停4秒中，然后再開始執行下依次滾動。
        if (o.scrollheight % s_area.offsetheight == 0) {
            o.scrolltimer = settimeout(anim, o.speed);
        }
        else {
            // 在兩行內容之間過度滾動時，每10豪秒上升1px
            o.scrolltimer = settimeout(anim, 10);
        }
    };
    // 執行滾動
    anim();
};
/**
* scrollvertical 垂直滾動的構造函數
* @param {object} disp   - 必須顯示滾動區域的dom節點（或節點id）
* @param {object} msg    - 必須被顯示的信息的dom節點（或節點id）
* @param {string} tg     - 可選以什么標記為一行的標簽名稱（tagname）
*/
function scrollvertical(disp, msg, tg){
    // 給在之前定義的this.scrollarea付值
    if (typeof(disp) == 'string') {
        // 如果disp給的是節點的id，通過document.getelementbyid獲取該節點
        // 然后付值給this.scrollarea
        this.scrollarea = document.getelementbyid(disp);
    }
    else {
        // 如果是dom節點，直接付給this.scrollarea
        this.scrollarea = disp;
    }
    // 以給this.scrollarea相同的方法給this.scrollmsg付值
    if (typeof(msg) == 'string') {
        this.scrollmsg = document.getelementbyid(msg);
    }
    else {
        this.scrollmsg = msg;
    }

    // 為了開發方便，
    // 不用一直寫this.scrollmsg這么常的名字，
    // 將兩個對象付給局部變量
    var s_msg = this.scrollmsg;
    var s_area = this.scrollarea;

    // 如果沒有給定一行的識別標簽，
    // 默認將li標簽認為是一行的標簽
    // 所以上面介紹的，tag參數是可選的
    if (!tg) {
        var tg = 'li';
    }

    // 獲取單行的高度
    // 獲取到第一(s_msg.getelementsbytagname(tg)[0])tg(一行的標簽)的高度，作為單行的高度
    this.unitheight = s_msg.getelementsbytagname(tg)[0].offsetheight;
    // 獲取整個信息框的高度
    // 公式為單行高度（unitheight）*行數（s_msg.getelementsbytagname(tg).length，顯示信息中包含多少個tg(行)標簽）
    this.msgheight = this.unitheight * s_msg.getelementsbytagname(tg).length;
    /*
     * 復制要顯示的信息：
     * 連續滾動的實現其實就是通過復制信息，
     * 并將復制的信添加到原始信息后
     * 當原始信息滾動顯示完成，就接著滾動顯示復制的信息
     * 但給人的錯覺是，我們看到信息連續不斷的顯示
     */
    // 創建復制內容節點
    var copydiv = document.createelement('div');
    // 這個地方感覺有點嵌妥
    // 直接使用element.id的方式，不過看上去，主流的瀏覽器都支持
    // 標準的dom core方法：
    // copydiv.setattribute('id',s_area.id + "_copymsgid")
    copydiv.id = s_area.id + "_copymsgid";
    // 復制原始的信息
    // 將原始的信息s_msg中的內容，直接用innerhtml寫到
    copydiv.innerhtml = s_msg.innerhtml;
    // 設置復制信息節點的高度
    copydiv.style.height = this.msgheight + "px";
    // 將復制節點添加到原始接點（scrollmsg）后
    // 其實實現的方法就是將復制信息節點（copydiv）添家到顯示區域的節點（scrollarea）中
    s_area.appendchild(copydiv);

    this.copymsg = copydiv;
    // 開始執行滾動方法
    this.play(this);
}

我在腳本的注釋中已經說了這個效果的實現原理，而實現一個效果的關鍵就是在于運用settimeout方法和cleartimeout方法。

|||

settimeout(func,time)

settimeout是window對象的一個方法，所以如果要是看到這么寫window.settimeout你不要感到奇怪，我們平時一般都省略了window。

settimeout方法接受兩個參數：
func - 在指定時間間隔內要執行的函數；
time - 執行函數的時間間隔（以毫秒為單位，1000毫秒等于1秒）

我一開始沒有解釋settimeout的功能，而是先說了兩個參數的意思，我想大家看了后就會有所了解，settimeout的功能就是：設置定時器，在一段時間之后執行指定的代碼。

不如本例中的：

settimeout(anim, o.speed);

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

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

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

function whatwedonow(){
    var str = 'this is what we do now';
    if(doalert) {
       cleartimeout(doalert)
    }
    var doalert = settimeout(function(){
       alert(str);
    },1000);
}

而且不知道你發現沒有，這么寫還有一個好處，你的function還可以接受其他的參數，比如這里我們可以接受whatwedonow()函數中的局部變量。如果你再結合閉包的使用，好處會更顯而易見。

剛才說的一點應該說是一個不好的使用settimeout的習慣。呵呵，接下來我還要說的一個更不好的使用習慣就是只使用settimeout()方法，而不使用cleartimeout()方法。

cleartimeout(itimeoutid)

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

cleartimeout(o.scrolltimer);

timer（定時器），夠直接吧。那么為什么要停止定時器？什么時候停止呢？

為什么要停，我想用個反問：能一直不停嗎，你的機器受得了嗎？這里我想應該說說我們使用settimeout的目的，我們通常使用它來實現像本例這樣的動畫效果。需要在很短的時間內連續不斷的執行定時器，當然它是要占資源的啊。想想，只是不斷的創建，而且往往我們做的處理，在1秒中內會執行很多次函數，一兩次還好，上百上千次，而且一個復雜些的動畫，執行很短的時間內幾萬次也不是沒有可能事情。你想想，如果我們不在每執行完一次后，銷毀它。要是再加上定時器執行的函數又是個比較nb點的運算，你的寶貴的系統資源...，呵呵！

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

呵呵，其實銷毀的方法很簡單，就是在每次創建定時器前，判斷是否已經創建了訂時器，就像特效例子中的

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

邏輯就是：

是不是一個很流暢的循環？現在大家應該知道了，為什么要cleartimeout和何時cleartimeout了嗎？

|||

介紹了大半天的settimeout和cleartimeout，呵呵，現在可以看看怎么使用這個特效吧，頁面代碼：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>滾動圖片</title>
<style type="text/css">

</style>
</head>
<body>
<div id="container">
<div id="message">
<ul><li><a href="http://www.yaohaixiao.com/" target="_blank" title="聽海"><img src="img/img1.gif" alt="聽海" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="聽海"><img src="img/img1.gif" alt="聽海" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="聽海"><img src="img/img1.gif" alt="聽海" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="聽海"><img src="img/img1.gif" alt="聽海" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="聽海"><img src="img/img1.gif" alt="聽海" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="聽海"><img src="img/img1.gif" alt="聽海" /></a></li>
</ul>
<ul>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="寶貝"><img src="img/img2.gif" alt="寶貝" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="寶貝"><img src="img/img2.gif" alt="寶貝" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="寶貝"><img src="img/img2.gif" alt="寶貝" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="寶貝"><img src="img/img2.gif" alt="寶貝" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="寶貝"><img src="img/img2.gif" alt="寶貝" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="寶貝"><img src="img/img2.gif" alt="寶貝" /></a></li>
</ul>
<ul>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="因為你"><img src="img/img3.gif" alt="因為你" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="因為你"><img src="img/img3.gif" alt="因為你" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="因為你"><img src="img/img3.gif" alt="因為你" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="因為你"><img src="img/img3.gif" alt="因為你" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="因為你"><img src="img/img3.gif" alt="因為你" /></a></li>
<li><a href="http://www.yaohaixiao.com/" target="_blank" title="因為你"><img src="img/img3.gif" alt="因為你" /></a></li>
</ul>
</div>
</div>
<script type="text/javascript" language="javascript" src="js/event.js"></script>
<script type="text/javascript" language="javascript" src="js/scrollver.js"></script>
<script type="text/javascript" language="javascript">

</script>
</body>
</html>

剛才給大家介紹了js的一些知識點，現在就講下相關的css技巧。

#container{
    margin:0 auto;
    margin-top:10px;
    width:720px;
    height:100px;
    overflow:hidden;
}

一定要“overflow:hidden;”，為什么？呵呵，看看我們把高度設置為了height:100px;，正好是只一行信息的高度，如果你不overflow:hidden，在firefox也許沒有問題，它會嚴格按照你指定的高度顯示相應高度的內容，而隱藏多余的部分（多余的5行），而在ie中，一直就自做聰明把容器擠高，讓它把里面的全部內容都顯示出來。而我們的效果也是只顯示一行，而隱藏多余的5行。

|||

你可能要問了，怎么有多余的5行？呵呵，其實代碼中已經解釋了：

// 創建復制內容節點
    var copydiv = document.createelement('div');
    // 這個地方感覺有點嵌妥
    // 直接使用element.id的方式，不過看上去，主流的瀏覽器都支持
    // 標準的dom core方法：
    // copydiv.setattribute('id',s_area.id + "_copymsgid")
    copydiv.id = s_area.id + "_copymsgid";
    // 復制原始的信息
    // 將原始的信息s_msg中的內容，直接用innerhtml寫到
    copydiv.innerhtml = s_msg.innerhtml;
    // 設置復制信息節點的高度
    copydiv.style.height = this.msgheight + "px";
    // 將復制節點添加到原始接點（scrollmsg）后
    // 其實實現的方法就是將復制信息節點（copydiv）添家到顯示區域的節點（scrollarea）中
    s_area.appendchild(copydiv);

因為我們又復制了一份信息，并添加到要顯示滾動信息的容器中了，所以3行變6行了。

呵呵，接下的也沒有什么好講了，大家看我的注釋，應該可以很清楚了。唯一要注意的一點就是這里

        // 滾動高度等于顯示滾動區域高度時（滾動完一行，一行內容全部顯示）
        // 暫停4秒中，然后再開始執行下依次滾動。
        if (o.scrollheight % s_area.offsetheight == 0) {
            o.scrolltimer = settimeout(anim, o.speed);
        }
        else {
            // 在兩行內容之間過度滾動時，每10豪秒上升1px
            o.scrolltimer = settimeout(anim, 10);
        }

o.scrollheight % s_area.offsetheight == 0，要明白它確切的意思。

#container{
    margin:0 auto;
    margin-top:10px;
    width:720px;
    height:100px;
    overflow:hidden;
}
#message,
#message_copymsgid{
    margin:0;
    width:720px;
    overflow:hidden;
}
#container ul{
    float:left;
    width:720px;
    height:100px;
    overflow:hidden;
    clear:both;
}