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

下載本文檔

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

文檔簡(jiǎn)介

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

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

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

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

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

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

7、v id=”news”></div><!- 新聞動(dòng)態(tài)結(jié)束 ->因?yàn)樾侣剟?dòng)態(tài)被分成了三個(gè)部分，所以再使用三個(gè)div分別來(lái)表示新聞動(dòng)態(tài)的 頭部、中間和底部部分。并且分別使用三個(gè)id來(lái)標(biāo)識(shí)它們。HTML代碼如下：<!- 新聞動(dòng)態(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><!- 新聞動(dòng)態(tài)結(jié)束 ->5. 整體樣式設(shè)置根據(jù)效果圖切片，先設(shè)定好新聞動(dòng)態(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)容的擴(kuò)展性，新聞中間部分的背景，被設(shè)為了整個(gè)新聞動(dòng)態(tài)的背景。6. 新聞?lì)^部制作這里因?yàn)橛袀€(gè)more的圖片，所以頭部的圖片是個(gè)背景，背景之上放的是more圖片。這個(gè)more是個(gè)超鏈接結(jié)構(gòu)，通過點(diǎn)擊它可以打開更多的新聞列表。修正頭部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; /* 這個(gè)一定要加上，內(nèi)容超出的部分要隱藏，免得撐高頭部 */#news_t afloat:right;margin-right:30px;margin-top:

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

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

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

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

15、-20</span></li> <li><a href="#">新聞滾動(dòng)內(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;這樣，一個(gè)靜態(tài)的新聞列表就完成了。圖 4.3.16 靜止的新聞動(dòng)態(tài)不過，它只是一般的新聞動(dòng)態(tài)列表，還不會(huì)滾動(dòng)。接下來(lái)就添加相關(guān)的JS代碼。4.3.2 添加JS代碼1. js滾動(dòng)結(jié)構(gòu)分析無(wú)縫滾動(dòng)最大的特色就是能長(zhǎng)久的滾動(dòng)下去，像是一個(gè)無(wú)限循環(huán)一樣。當(dāng)然，實(shí)際上的循環(huán)是不可能無(wú)限的。只是通過手段，欺騙了瀏覽者的眼睛這個(gè)嘛，稍后會(huì)有詳細(xì)解釋。圖 4.3.21 一雙騙人的眼睛為了達(dá)到欺騙的目的,這里采用了兩個(gè)UL

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

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

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

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

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

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

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

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

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

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

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

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

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

溫馨提示

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

評(píng)論

0/150

提交評(píng)論