無縫滾動-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)，請進行舉報或認領(lǐng)

文檔簡介

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

2、動效果”。怎么才能讓圖片滾動的時候沒有空白呢？HTML自帶的滾動標簽<marquee>自然滿足不了這種視覺特效要求（也正是因為這點，marquee標簽現(xiàn)在已經(jīng)逐漸的淡出人們的視線，處于被淘汰的境地了）。因此，需要借助我們神通廣大的Javascript來實現(xiàn)這個效果?，F(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ù)目標利用j

3、s效果，實現(xiàn)如下樣式的新聞動態(tài)向上無縫滾動。圖 1 新聞動態(tài)無縫滾動效果圖小提示如果沒有特殊的要求：水平滾動一般是向左滾動，垂直滾動一般是向上滾動。因為這樣符合人們的“從左到右，從上到下的閱讀習慣”。4.2 設(shè)計思路任何網(wǎng)站網(wǎng)頁都是從效果圖切片后，再通過各種方式布局而成（現(xiàn)在主要使用divcss）。一個特效做的再好看，它的“前身”還是一張靜靜的效果圖。（本例效果圖見源碼中“學習情景四無縫滾動”“無縫滾動效果圖.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打開源碼中“學習情景四無縫滾動”的效果圖2. 切片結(jié)構(gòu)分析因為該新聞部分是圓角，并且有些圖片的修飾在上面。因此，整個新聞部分被分成三個部分。如下圖所示圖 4.3.11 新聞動態(tài)無縫滾動效果圖分析那么我們在切片的時候，分成三塊來切片。其中頭部和底部各切一塊。中間比較特殊，因為考慮到切片要盡量的小點，又利于內(nèi)容的擴展。所以，中間部分的背景不宜

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

6、ht:24px; text-algin:center; /* 頁面內(nèi)容居中 */*margin:0px;padding:0px; /* 去掉所有標簽的marign和padding的值 */ullist-style:none; /* 去掉ul標簽?zāi)J的點樣式 */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來標識它們。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)，中間部分的寬度并沒有達到新聞動態(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)一樣。當然，實際上的循環(huán)是不可能無限的。只是通過手段，欺騙了瀏覽者的眼睛這個嘛，稍后會有詳細解釋。圖 4.3.21 一雙騙人的眼睛為了達到欺騙的目的,這里采用了兩個UL

17、列表來做新聞。通過兩個新聞內(nèi)容的滾動來模擬循環(huán)滾動。一個在上，一個在下，并且給它們分別用兩個id標識，“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里，每個成對的標簽，比如這里新聞的中間部分<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)前面。當js代碼運行的時候，html結(jié)構(gòu)還沒出現(xiàn)，js會獲取不到div的id?？墒?，添加了代碼后，同學們會發(fā)現(xiàn)新聞內(nèi)容會沒有變化。為什么呢？是代碼錯了么？仔細想下，我們的新聞目前只有6條，而6條新聞剛剛好全部出現(xiàn)在新聞中間部分，瀏覽者正好全部看到它們，所有新聞一目了然。既然內(nèi)容都在這里了，有必要還需要滾動嗎？小提示滾動的意義就在于讓瀏覽者看到被滾動區(qū)域隱藏的內(nèi)容，因此：當內(nèi)容全部出現(xiàn)在滾動區(qū)域之內(nèi)的時候，內(nèi)容是不會滾動的。既然內(nèi)容全部都出現(xiàn)的時候，不會滾動。那么，我們就來增加

23、幾條新聞。把原來的6條新聞增加為10條。可是新聞內(nèi)容多了不會撐高中間部分的div么？當然不會啦。不要忘了我們給中間部分的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)容是滾動了，不過當內(nèi)容全部滾動完畢后，又會停止下來。依然達不到循環(huán)滾動的目的。小提示當內(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當“內(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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論