無縫滾動-js原理分析和css分析(編輯修改稿)
2025-08-31 16:42 本頁面
【文章內(nèi)容簡介】 中間部分的寬度并沒有達到新聞動態(tài)的寬度，而是要窄點。圖 －5 中間部分分析添加中間部分樣式/* 中間樣式 */news_z{ height:144px。 width:335px。 marginleft:35px。 margintop:13px。 marginbottom:14px。 overflow:hidden。 /* 這個一定要加，超出的內(nèi)容部分要隱藏，免得撐高中間部分 */ }添加新聞列表。對于列表，一般使用ul和li來做。! 中間 div id =news_z ul lia href=新聞滾動內(nèi)容內(nèi)容內(nèi)容演示1/aspan20100120/span/li lia href=新聞滾動內(nèi)容內(nèi)容內(nèi)容演示2/aspan20100120/span/li lia href=新聞滾動內(nèi)容內(nèi)容內(nèi)容演示3/aspan20100120/span/li lia href=新聞滾動內(nèi)容內(nèi)容內(nèi)容演示4/aspan20100120/span/li lia href=新聞滾動內(nèi)容內(nèi)容內(nèi)容演示5/aspan20100120/span/li lia href=新聞滾動內(nèi)容內(nèi)容內(nèi)容演示6/aspan20100120/span/li /ul /div! 中間結(jié)束 …….給新聞列表添加樣式news ul li { height:24px。}news ul li a{ width:180px。 float:left。 display:block。 overflow:hidden。 background:url(../images/) 0px 8px norepeat。 textindent:15px。 height:24px。 }news ul li span{ float:right。 color:999。 }這樣，一個靜態(tài)的新聞列表就完成了。圖 －6 靜止的新聞動態(tài)不過，它只是一般的新聞動態(tài)列表，還不會滾動。接下來就添加相關(guān)的JS代碼。 添加JS代碼1. js滾動結(jié)構(gòu)分析無縫滾動最大的特色就是能長久的滾動下去，像是一個無限循環(huán)一樣。當(dāng)然，實際上的循環(huán)是不可能無限的。只是通過手段，欺騙了瀏覽者的眼睛――這個嘛，稍后會有詳細解釋。圖 －1 一雙騙人的眼睛為了達到欺騙的目的,這里采用了兩個UL列表來做新聞。通過兩個新聞內(nèi)容的滾動來模擬循環(huán)滾動。一個在上，一個在下，并且給它們分別用兩個id標(biāo)識，“p1”和“p2”。修改新聞列表html代碼如下：! 中間 div id=news_zul id=p1 lia href=新聞滾動內(nèi)容內(nèi)容內(nèi)容演示1/aspan20100120/span/li lia href=新聞滾動內(nèi)容內(nèi)容內(nèi)容演示2/aspan20100120/span/li lia href=新聞滾動內(nèi)容內(nèi)容內(nèi)容演示3/aspan20100120/span/li lia href=新聞滾動內(nèi)容內(nèi)容內(nèi)容演示4/aspan20100120/span/li lia href=新聞滾動內(nèi)容內(nèi)容內(nèi)容演示5/aspan20100120/span/li lia href=新聞滾動內(nèi)容內(nèi)容內(nèi)容演示6/aspan20100120/span/li/ulul id=p2/ul/div! 中間結(jié)束 大家會發(fā)現(xiàn)這里后的新聞內(nèi)容html有兩個特點：1) id為p1的ul在上，p2這個ul在下。2) p2這個ul里沒有任何內(nèi)容，是空白一片。原因是：1) 上下滾動新聞，因此就讓兩個新聞內(nèi)容ul上下排列。2) 如果直接p2也添加上內(nèi)容的話，會給
研究報告相關(guān)推薦
鄂ICP備17016276號-1