|
你可能要問了，怎么有多余的5行？呵呵，其實(shí)代碼中已經(jīng)解釋了：
// 創(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);
因?yàn)槲覀冇謴?fù)制了一份信息，并添加到要顯示滾動(dòng)信息的容器中了，所以3行變6行了。
呵呵，接下的也沒有什么好講了，大家看我的注釋，應(yīng)該可以很清楚了。唯一要注意的一點(diǎn)就是這里
// 滾動(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);
}
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;
}
ul也就是我們一行的高度為100px，o.scrollHeight已經(jīng)滾動(dòng)的高度。呵呵，不知道你發(fā)現(xiàn)了問題沒有？
對(duì)了，問題就在 % s_area.offsetHeight，我之所以沒有更正原程序里的這個(gè)缺點(diǎn)，是因?yàn)槿绻悴粚?duì)#container做任何修飾，這么寫沒有錯(cuò)。因?yàn)閟_area也就是#container這里我只定義了height:100px;，如果我要是這么寫：
#container{
margin:0 auto;
margin-top:10px;
width:720px;
height:100px;
overflow:hidden;
border:1px;
padding:1px;
}
呵呵，你覺得會(huì)有什么結(jié)果？這里我就賣個(gè)官子，給大家出個(gè)作業(yè)，看看像我這樣做了會(huì)，有一個(gè)什么結(jié)果，還有o.scrollHeight % s_area.offsetHeight == 0要怎么改該呢？
好了，特效講解完畢，也不知道我這么講解一個(gè)特效，對(duì)你有沒有幫助。像里面的ceateElement,appendChild等等DOM的方法，大家還是需要不斷的學(xué)習(xí)，可能才能完全明白和掌握，我這里不可能一一都講清楚。好了，收工！
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2896417-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2008/6286.asp 
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 不間斷滾動(dòng)圖片Javascript特效講解 [3] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 4 頁 不間斷滾動(dòng)圖片Javascript特效講解 [4]
