無縫滾動-js原理分析和css分析_第1頁
無縫滾動-js原理分析和css分析_第2頁
無縫滾動-js原理分析和css分析_第3頁
無縫滾動-js原理分析和css分析_第4頁
無縫滾動-js原理分析和css分析_第5頁
已閱讀5頁，還剩16頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、學(xué)習(xí)情景四 圖片（文字）無縫滾動4.1 任務(wù)目標(biāo)4.1.1 任務(wù)引入滾動效果，是網(wǎng)頁中很常見，用途也很廣的一種效果。就是HTML自帶的標(biāo)簽也有專門表示滾動的標(biāo)簽<marquee>。Marquee標(biāo)簽可以很輕松的實現(xiàn)頁面中的文字或者圖片的滾動。如下：<marquee>這個是html自帶的滾動標(biāo)簽marqee。默認(rèn)向左滾動。</marquee>但是，marquee標(biāo)簽有個致命的缺陷滾動中會有空白出現(xiàn)。這些空白，會讓網(wǎng)頁的界面效果大打折扣。如果能讓滾動的時候沒有空白，那么整個頁面效果就舒服多了！這種沒有空白的滾動，我們通常稱之“無縫滾動”就是“沒有縫隙（空白）的滾

2、動效果”。怎么才能讓圖片滾動的時候沒有空白呢？HTML自帶的滾動標(biāo)簽<marquee>自然滿足不了這種視覺特效要求（也正是因為這點，marquee標(biāo)簽現(xiàn)在已經(jīng)逐漸的淡出人們的視線，處于被淘汰的境地了）。因此，需要借助我們神通廣大的Javascript來實現(xiàn)這個效果。現(xiàn)在很多網(wǎng)站都喜歡使用無縫滾動的圖片或者文字來突出內(nèi)容，以此來吸引瀏覽者的注意。特別是一些企業(yè)網(wǎng)站的產(chǎn)品展示、人物介紹或者新聞公告部分，更是滾動特效的常用部分。圖1 某網(wǎng)站的產(chǎn)品展示部分該部分就是用js實現(xiàn)了產(chǎn)品圖片的水平滾動。圖2 某網(wǎng)站的客戶動態(tài)部分該部分用js實現(xiàn)了客戶信息的垂直向上滾動。4.1.2 任務(wù)目標(biāo)利用j

3、s效果，實現(xiàn)如下樣式的新聞動態(tài)向上無縫滾動。圖 1 新聞動態(tài)無縫滾動效果圖小提示如果沒有特殊的要求：水平滾動一般是向左滾動，垂直滾動一般是向上滾動。因為這樣符合人們的“從左到右，從上到下的閱讀習(xí)慣”。4.2 設(shè)計思路任何網(wǎng)站網(wǎng)頁都是從效果圖切片后，再通過各種方式布局而成（現(xiàn)在主要使用divcss）。一個特效做的再好看，它的“前身”還是一張靜靜的效果圖。（本例效果圖見源碼中“學(xué)習(xí)情景四無縫滾動”“無縫滾動效果圖.jpg”,并附有psd源文件以供參考切片）因此，我們在制作絢麗的JS特效的先前步驟一般是：1. 根據(jù)策劃和頁面的效果圖，完成效果圖的切片，做成靜態(tài)html頁面這里采用時下流行的divcs

4、s布局。2. 在html靜態(tài)頁面的基礎(chǔ)之上，再添加JS代碼，完成特效。也就是說，js特效是在html結(jié)構(gòu)成型之后，再添加上去的。不同的結(jié)構(gòu)，要表現(xiàn)出同樣的js效果，可能會需要編寫不同的js特效代碼。4.3 任務(wù)實施4.3.1 切片布局1. 用photoshop打開源碼中“學(xué)習(xí)情景四無縫滾動”的效果圖2. 切片結(jié)構(gòu)分析因為該新聞部分是圓角，并且有些圖片的修飾在上面。因此，整個新聞部分被分成三個部分。如下圖所示圖 4.3.11 新聞動態(tài)無縫滾動效果圖分析那么我們在切片的時候，分成三塊來切片。其中頭部和底部各切一塊。中間比較特殊，因為考慮到切片要盡量的小點，又利于內(nèi)容的擴展。所以，中間部分的背景不宜

5、切成一整塊。最好的方法就是切一塊高度為1px的圖片，讓它垂直平鋪作為新聞的背景。（具體的切片，同學(xué)們可以參考源碼。）另外，“更多”部分也是一個圖片，也需要把它切片出來。切片完成！3. 在DW中完成新聞板塊的布局這里采用時下流行的DIVCSS布局。先在DW中創(chuàng)建站點，然后建立相關(guān)的css文件和html文件，站點大致結(jié)構(gòu)如下：圖 4.3.12 站點參考結(jié)構(gòu)先把css文件，在DW站點中，拖到html文件里的<head>標(biāo)簽之間。把css文件跟html文件鏈接起來。然后編寫css的公用樣式（就是幾乎每個頁面都會采用的樣式），參考如下：bodyfont-size:12px;line-heig

6、ht:24px; text-algin:center; /* 頁面內(nèi)容居中 */*margin:0px;padding:0px; /* 去掉所有標(biāo)簽的marign和padding的值 */ullist-style:none; /* 去掉ul標(biāo)簽?zāi)J(rèn)的點樣式 */a img border:none; /* 超鏈接下，圖片的邊框 */a color:#333;text-decoration:none; /* 超鏈接樣式 */a:hovercolor:#ff0000;4. 開始新聞動態(tài)框架布局先用一個div，id=”news”，用來裝套整個新聞動態(tài)。<!- 新聞動態(tài)開始 -><di

7、v id=”news”></div><!- 新聞動態(tài)結(jié)束 ->因為新聞動態(tài)被分成了三個部分，所以再使用三個div分別來表示新聞動態(tài)的 頭部、中間和底部部分。并且分別使用三個id來標(biāo)識它們。HTML代碼如下：<!- 新聞動態(tài)開始 -><div id=”news”> <!- 頭部 -> <div id="news_t"> </div> <!- 頭部結(jié)束 -> <!- 中間 -> <div id ="news_z"> </div&

8、gt; <!- 中間結(jié)束 -> <!- 底部 -> <div id ="news_d"> </div> <!- 底部結(jié)束 -></div><!- 新聞動態(tài)結(jié)束 ->5. 整體樣式設(shè)置根據(jù)效果圖切片，先設(shè)定好新聞動態(tài)整塊的寬高和背景。#newswidth:399px;height:251px;background:url(./images/gd_mid.gif) repeat-y; /* 背景垂直排列 */margin-left:auto; /* firefox下居中 */margin-rig

9、ht:auto;text-align:left; /* 讓新聞內(nèi)容靠左 */需要說明的是：為了內(nèi)容的擴展性，新聞中間部分的背景，被設(shè)為了整個新聞動態(tài)的背景。6. 新聞頭部制作這里因為有個more的圖片，所以頭部的圖片是個背景，背景之上放的是more圖片。這個more是個超鏈接結(jié)構(gòu)，通過點擊它可以打開更多的新聞列表。修正頭部html結(jié)構(gòu)如下：其他部分代碼省略<!- 頭部 -> <div id="news_t"> <a href="#" target="_self"><img src="

10、images/more.gif" width="45" height="11" /></a> </div><!- 頭部結(jié)束 ->其他部分代碼省略設(shè)置頭部樣式#news_twidth:399px;height:64px;background:url(./images/gd_top.gif) no-repeat; overflow:hidden; /* 這個一定要加上，內(nèi)容超出的部分要隱藏，免得撐高頭部 */#news_t afloat:right;margin-right:30px;margin-top:

11、30px;display:inline;圖 4.3.13 新聞動態(tài)頭部效果7. 新聞底部制作這部分因為沒有內(nèi)容，所以可以添加 &nbsp; 來填充內(nèi)容。設(shè)置好寬高后，可以直接給底部添加背景。底部樣式如下：/* 底部樣式 */#news_d width:399px; height:16px; overflow:hidden; /* 這個一定要加上，內(nèi)容超出的部分要隱藏，免得撐高底部結(jié)構(gòu) */ background:url(./images/gd_btm.gif) no-repeat;圖 4.3.14 添加了新聞動態(tài)底部樣式（還未添加中間內(nèi)容）8. 中間部分制作通過計算得知，中間部分的高度

12、為 251px64px16px171px。但是，內(nèi)容上只設(shè)計了6行的高度（行高設(shè)為24px）。因此，中間內(nèi)容高為 6×24px144px，距離上面下面，各為 13px 和 14px。注意: 通過觀察效果圖發(fā)現(xiàn)，中間部分的寬度并沒有達(dá)到新聞動態(tài)的寬度，而是要窄點。圖 4.3.15 中間部分分析添加中間部分樣式/* 中間樣式 */#news_zheight:144px;width:335px;margin-left:35px;margin-top:13px;margin-bottom:14px;overflow:hidden; /* 這個一定要加，超出的內(nèi)容部分要隱藏，免得撐高中間部分

13、*/添加新聞列表。對于列表，一般使用ul和li來做。<!- 中間 -> <div id ="news_z"> <ul> <li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示1</a><span>2010-01-20</span></li> <li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示2</a><span>2010-01-20</span></li&

14、gt; <li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示3</a><span>2010-01-20</span></li> <li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示4</a><span>2010-01-20</span></li> <li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示5</a><span>2010-01

15、-20</span></li> <li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示6</a><span>2010-01-20</span></li> </ul> </div><!- 中間結(jié)束 ->.給新聞列表添加樣式#news ul li height:24px;#news ul li awidth:180px; float:left;display:block;overflow:hidden;background:url(./image

16、s/sj.gif) 0px 8px no-repeat;text-indent:15px;height:24px;#news ul li spanfloat:right;color:#999;這樣，一個靜態(tài)的新聞列表就完成了。圖 4.3.16 靜止的新聞動態(tài)不過，它只是一般的新聞動態(tài)列表，還不會滾動。接下來就添加相關(guān)的JS代碼。4.3.2 添加JS代碼1. js滾動結(jié)構(gòu)分析無縫滾動最大的特色就是能長久的滾動下去，像是一個無限循環(huán)一樣。當(dāng)然，實際上的循環(huán)是不可能無限的。只是通過手段，欺騙了瀏覽者的眼睛這個嘛，稍后會有詳細(xì)解釋。圖 4.3.21 一雙騙人的眼睛為了達(dá)到欺騙的目的,這里采用了兩個UL

17、列表來做新聞。通過兩個新聞內(nèi)容的滾動來模擬循環(huán)滾動。一個在上，一個在下，并且給它們分別用兩個id標(biāo)識，“p1”和“p2”。修改新聞列表html代碼如下：<!- 中間 -><div id="news_z"><ul id="p1"> <li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示1</a><span>2010-01-20</span></li> <li><a href="#">新

18、聞滾動內(nèi)容內(nèi)容內(nèi)容演示2</a><span>2010-01-20</span></li> <li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示3</a><span>2010-01-20</span></li> <li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示4</a><span>2010-01-20</span></li> <li><a

19、 href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示5</a><span>2010-01-20</span></li> <li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示6</a><span>2010-01-20</span></li></ul><ul id="p2"></ul></div><!- 中間結(jié)束 ->大家會發(fā)現(xiàn)這里后的新聞內(nèi)容html有兩個特

20、點：1) id為p1的ul在上，p2這個ul在下。2) p2這個ul里沒有任何內(nèi)容，是空白一片。原因是：1) 上下滾動新聞，因此就讓兩個新聞內(nèi)容ul上下排列。2) 如果直接p2也添加上內(nèi)容的話，會給頁面增加下載量，同時也給后臺人員增加工作量。因此，p2就先暫時是空白內(nèi)容，其具體的內(nèi)容可以在稍后通過js代碼添加上去。那么接下來的疑問就是，兩個ul怎么來實現(xiàn)循環(huán)滾動的呢？2. 先讓新聞滾動起來在html里，每個成對的標(biāo)簽，比如這里新聞的中間部分<div>,都有一個屬性 scrollTop，它是用來表示內(nèi)容向上滾動的數(shù)值。內(nèi)容滾動區(qū)域DIV.scrollTopDIV我們先讓新聞滾動一點。

21、添加如下js，在新聞滾動結(jié)構(gòu)的后面：<!- 新聞動態(tài)-><div id=”news”>.省略代碼</div><!- 新聞動態(tài)結(jié)束 -> <script type="text/javascript"> var area=document.getElementById("news_z"); /*獲取滾動區(qū)域，也就是新聞內(nèi)容的中間部分div的id。用變量area來表示它。*/ area.scrollTop=10; /* 讓新聞內(nèi)容向上滾動10個像素 */ </script>小提示這里把js

22、代碼，寫在了html結(jié)構(gòu)的后面，是因為：Js代碼要直接獲取html結(jié)構(gòu)div的id。如果這里js代碼，寫在了html結(jié)構(gòu)前面。當(dāng)js代碼運行的時候，html結(jié)構(gòu)還沒出現(xiàn)，js會獲取不到div的id?？墒?，添加了代碼后，同學(xué)們會發(fā)現(xiàn)新聞內(nèi)容會沒有變化。為什么呢？是代碼錯了么？仔細(xì)想下，我們的新聞目前只有6條，而6條新聞剛剛好全部出現(xiàn)在新聞中間部分，瀏覽者正好全部看到它們，所有新聞一目了然。既然內(nèi)容都在這里了，有必要還需要滾動嗎？小提示滾動的意義就在于讓瀏覽者看到被滾動區(qū)域隱藏的內(nèi)容，因此：當(dāng)內(nèi)容全部出現(xiàn)在滾動區(qū)域之內(nèi)的時候，內(nèi)容是不會滾動的。既然內(nèi)容全部都出現(xiàn)的時候，不會滾動。那么，我們就來增加

23、幾條新聞。把原來的6條新聞增加為10條?？墒切侣剝?nèi)容多了不會撐高中間部分的div么？當(dāng)然不會啦。不要忘了我們給中間部分的div（id為 news_z）,添加了一條樣式：overflow:hidden;它的作用就是，讓超出div高度的部分隱藏（hidden）起來。修改html內(nèi)容如下：<!- 中間 -><div id="news_z"><ul id="p1"> <li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示1</a><span>2010-01-

24、20</span></li> <li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示2</a><span>2010-01-20</span></li> <li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示3</a><span>2010-01-20</span></li> <li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示4</a

25、><span>2010-01-20</span></li> <li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示5</a><span>2010-01-20</span></li> <li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示6</a><span>2010-01-20</span></li><li><a href="#"

26、>新聞滾動內(nèi)容內(nèi)容內(nèi)容演示7</a><span>2010-01-20</span></li><li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示8</a><span>2010-01-20</span></li><li><a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示9</a><span>2010-01-20</span></li><li><

27、;a href="#">新聞滾動內(nèi)容內(nèi)容內(nèi)容演示10</a><span>2010-01-20</span></li></ul><ul id="p2"></ul></div><!- 中間結(jié)束 ->再打開頁面看看：圖 4.3.21 新聞內(nèi)容往上滾動了10個像素3. 讓新聞不停的向上滾動新聞內(nèi)容滾動了，可是只會滾動一下。如何來讓它不停的滾動呢？這里就要用到j(luò)s內(nèi)置的函數(shù) setInterval。同時，我們也增加了一個變量，命名為dis，用來表示滾動

28、的距離。同時，增加一個函數(shù)，讓它來讓變量dis值不停的變大（內(nèi)容滾動的越多）。修正js代碼如下：<!- 新聞動態(tài)-><div id=”news”>.省略代碼</div><!- 新聞動態(tài)結(jié)束 -><script type="text/javascript"> var area=document.getElementById("news_z"); /*獲取滾動區(qū)域，也就是新聞內(nèi)容的中間部分div的id。用變量area來表示它。*/var dis=0; /* dis表示內(nèi)容滾動的距離。一開始沒有滾動，

29、就讓它的值為0*/ function goUp() dis+; /dis的值增加area.scrollTop=dis; /新聞內(nèi)容的滾動距離也在增加 var myset=setInterval("goUp()",50); /每50毫秒就執(zhí)行一下goUp函數(shù) </script>內(nèi)容是滾動了，不過當(dāng)內(nèi)容全部滾動完畢后，又會停止下來。依然達(dá)不到循環(huán)滾動的目的。小提示當(dāng)內(nèi)容全部滾動完畢后，正常情況下，滾動會自動停止。4. 讓內(nèi)容循環(huán)滾動起來循環(huán)滾動的原理其實很簡單，就是用2個內(nèi)容來輪流滾動。“內(nèi)容1” 滾動完了就讓 “內(nèi)容2” 開始滾動，然后又是“內(nèi)容1”滾動。原理示意圖如下：圖 4.3.23 滾動示意圖1最開始的時候圖 4.3.24 滾動示意圖2內(nèi)容1開始向上滾動圖 4.3.24 滾動示意圖3內(nèi)容1滾到底，內(nèi)容會停止?jié)L動圖 4.3.25 滾動示意圖4這時產(chǎn)生第二個內(nèi)容區(qū)，內(nèi)容2跟內(nèi)容1完全一樣圖 4.3.26 滾動示意圖5滾動區(qū)域內(nèi)容增加了“內(nèi)容2”，因此會繼續(xù)滾動圖 4.3.27 滾動示意圖6當(dāng)“內(nèi)容1”剛好移出區(qū)域外的時候圖 4.3.28 滾動示意圖7讓“內(nèi)容1”回到“起始點”，重新滾動。此時，div.scrollTop為0。根據(jù)這個原理，修改js代碼如下：<!- 新聞動態(tài)-><div id=”news”>.省略代碼&l

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論