作者：yaohaixiao 時(shí)間： 2008-11-14 文檔類型：原創(chuàng) 來自：藍(lán)色理想
第 1 頁(yè) 不間斷滾動(dòng)圖片Javascript特效講解 [1] 第 2 頁(yè) 不間斷滾動(dòng)圖片Javascript特效講解 [2] 第 3 頁(yè) 不間斷滾動(dòng)圖片Javascript特效講解 [3] 第 4 頁(yè) 不間斷滾動(dòng)圖片Javascript特效講解 [4]
介紹了大半天的setTimeout和clearTimeout，呵呵，現(xiàn)在可以看看怎么使用這個(gè)特效吧，頁(yè)面代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>滾動(dòng)圖片</title><style type="text/css"><!--*{ margin:0; padding:0;}body{ text-align:center; background-color:#FFF; color:#000; font:'宋體',sans-serif;}img{ border:0;}ul,li{ list-style-type:none;}a:link,a:visited{ color:#000; text-decoration:none;}a:hover{ color:#F00; text-decoration:none;}#container{ margin:0 auto; position:relative; 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;}#container li{ float:left; text-align:center; width:120px; height:100px; line-height:100px; overflow:hidden; padding:0;}#container li img{ width:96px; height:96px; margin-bottom:10px; padding:1px; border:1px solid #999;}--></style></head><body><div id="container"><div id="message"><ul><li><a href="<li><a href="<li><a href="<li><a href="<li><a href="<li><a href="</ul><ul><li><a href="<li><a href="<li><a href="<li><a href="<li><a href="<li><a href="</ul><ul><li><a href="<script type="text/javascript" language="javascript" src="js/scrollver.js"></script><script type="text/javascript" language="javascript"><!--function init_Scroll(){ // 創(chuàng)建一個(gè)垂直滾動(dòng)對(duì)象的實(shí)例 // 顯示容器為container，你也可以直接寫document.getElement('container') var scrollPics = new scrollVertical('container','message','ul'); scrollPics.speed = 4000; // 間隔時(shí)間，更準(zhǔn)確的說，是滾動(dòng)完一行，停留的時(shí)間 scrollPics.isPause = true; // 是否暫停為true，不能一開始就滾動(dòng)，需要先停留下，然后再滾動(dòng) // 這個(gè)則是指定，第一次顯示滾動(dòng)內(nèi)容第一行停留的時(shí)間為2秒 // 2秒后isPause為false,也就不暫停滾動(dòng)，開始滾動(dòng)了。 // 這個(gè)時(shí)間大家可以自己設(shè)定 var timer_start = setTimeout(function(){clearTimeout(timer_start);scrollPics.isPause = false;},2000); Event.addEvent(scrollPics.scrollArea,"mouseover",function(){scrollPics.isPause = true;}); Event.addEvent(scrollPics.scrollArea,"mouseout",function(){scrollPics.isPause = false;});}/* * 其實(shí)這里也可以直接寫init_Scroll();* 應(yīng)為我已經(jīng)把腳本放到文檔的最后面，* 在加載腳本之前，所有的DOM節(jié)點(diǎn)已經(jīng)加載完畢* 已經(jīng)可以直接用腳本訪問DOM節(jié)點(diǎn)了*/Event.addEvent(window,'load',init_Scroll);//--></script></body></html>
剛才給大家介紹了JS的一些知識(shí)點(diǎn)，現(xiàn)在就講下相關(guān)的CSS技巧。
#container{ margin:0 auto; margin-top:10px; width:720px; height:100px; overflow:hidden;}
一定要“overflow:hidden;”，為什么？呵呵，看看我們把高度設(shè)置為了height:100px;，正好是只一行信息的高度，如果你不overflow:hidden，在firefox也許沒有問題，它會(huì)嚴(yán)格按照你指定的高度顯示相應(yīng)高度的內(nèi)容，而隱藏多余的部分（多余的5行），而在IE中，一直就自做聰明把容器擠高，讓它把里面的全部?jī)?nèi)容都顯示出來。而我們的效果也是只顯示一行，而隱藏多余的5行。
出處：藍(lán)色理想 責(zé)任編輯：moby
上一頁(yè) 不間斷滾動(dòng)圖片Javascript特效講解 [2] 下一頁(yè) 不間斷滾動(dòng)圖片Javascript特效講解 [4]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
藍(lán)色理想版權(quán)申明：除部分特別聲明不要轉(zhuǎn)載，或者授權(quán)我站獨(dú)家播發(fā)的文章外，大家可以自由轉(zhuǎn)載我站點(diǎn)的原創(chuàng)文章，但原作者和來自我站的鏈接必須保留（非我站原創(chuàng)的，按照原來自一節(jié)，自行鏈接）。文章版權(quán)歸我站和作者共有。
轉(zhuǎn)載要求：轉(zhuǎn)載之圖片、文件，鏈接請(qǐng)不要盜鏈到本站，且不準(zhǔn)打上各自站點(diǎn)的水印，亦不能抹去我站點(diǎn)水印。
特別注意：本站所提供的攝影照片，插畫，設(shè)計(jì)作品，如需使用，請(qǐng)與原作者聯(lián)系，版權(quán)歸原作者所有，文章若有侵犯作者版權(quán)，請(qǐng)與我們聯(lián)系，我們將立即刪除修改。
第 1 頁(yè) 
第 3 頁(yè) 不間斷滾動(dòng)圖片Javascript特效講解 [3]
