html設(shè)置滾動(dòng)文字

1、 HTML標(biāo)簽標(biāo)簽滾動(dòng)文字標(biāo)簽滾動(dòng)文字標(biāo)簽上節(jié)回顧上節(jié)回顧圖像和多媒體的綜合使用圖像和多媒體的綜合使用圖像標(biāo)簽屬性的熟練使用圖像標(biāo)簽屬性的熟練使用19.2 滾動(dòng)文字滾動(dòng)文字(本節(jié)內(nèi)容本節(jié)內(nèi)容)19.2.1 添加滾動(dòng)文字添加滾動(dòng)文字marquee19.2.2 滾動(dòng)文字背景顏色滾動(dòng)文字背景顏色bgcolor19.2.3 設(shè)置滾動(dòng)方向設(shè)置滾動(dòng)方向direction19.2.4 設(shè)置滾動(dòng)方式設(shè)置滾動(dòng)方式behavior19.2.5 設(shè)置滾動(dòng)速度設(shè)置滾動(dòng)速度scrollamount19.2.6 設(shè)置滾動(dòng)延遲設(shè)置滾動(dòng)延遲scrolldelay19.2.7 設(shè)置滾動(dòng)范圍設(shè)置滾動(dòng)范圍width/height1

2、9.2.8 設(shè)置滾動(dòng)空白空間設(shè)置滾動(dòng)空白空間hspace/vspace19.2.9 設(shè)置滾動(dòng)循環(huán)設(shè)置滾動(dòng)循環(huán)loop19.2.1 添加滾動(dòng)文字添加滾動(dòng)文字marquee 基本語法基本語法 滾動(dòng)文字滾動(dòng)文字19.2.1 添加滾動(dòng)文字添加滾動(dòng)文字marquee 語法說明語法說明 將要添加滾動(dòng)效果的文字放到標(biāo)記之間，同時(shí)也可以設(shè)置文字的字體、大小和顏色。19.2.1 添加滾動(dòng)文字添加滾動(dòng)文字marquee 實(shí)例代碼19.2.1 添加滾動(dòng)文字添加滾動(dòng)文字marquee 網(wǎng)頁效果19.2.1 添加滾動(dòng)文字添加滾動(dòng)文字marquee 效果說明 圖19-12中的滾動(dòng)文字字體為隸書，字號(hào)為5像素，同時(shí)滾動(dòng)方式

3、是由瀏覽器的右邊向左邊滾動(dòng)。19.2.2 滾動(dòng)文字背景顏色滾動(dòng)文字背景顏色bgcolor 基本語法基本語法 滾滾動(dòng)文字動(dòng)文字19.2.2 滾動(dòng)文字背景顏色滾動(dòng)文字背景顏色bgcolor 語法說明語法說明 文字背景顏色使用十六進(jìn)制顏色代碼。19.2.2 滾動(dòng)文字背景顏色滾動(dòng)文字背景顏色bgcolor 實(shí)例代碼19.2.2 滾動(dòng)文字背景顏色滾動(dòng)文字背景顏色bgcolor 網(wǎng)頁效果網(wǎng)頁效果19.2.2 滾動(dòng)文字背景顏色滾動(dòng)文字背景顏色bgcolor 效果說明效果說明 在圖19-13中，滾動(dòng)文字的背景顏色設(shè)置為淡藍(lán)色，其中背景顏色要覆蓋整個(gè)滾動(dòng)文字會(huì)滾動(dòng)過的區(qū)域，所以看上去是和文字相等寬度的顏色帶。1

4、9.2.3 設(shè)置滾動(dòng)方向設(shè)置滾動(dòng)方向direction 基本語法基本語法 滾動(dòng)文字滾動(dòng)文字19.2.3 設(shè)置滾動(dòng)方向設(shè)置滾動(dòng)方向direction 語法說明語法說明19.2.3 設(shè)置滾動(dòng)方向設(shè)置滾動(dòng)方向direction 實(shí)例代碼實(shí)例代碼19.2.3 設(shè)置滾動(dòng)方向設(shè)置滾動(dòng)方向direction 網(wǎng)頁效果網(wǎng)頁效果19.2.3 設(shè)置滾動(dòng)方向設(shè)置滾動(dòng)方向direction 效果說明效果說明 圖19-14和圖19-15都是實(shí)例代碼19-2-3.html運(yùn)行的結(jié)果，只不過圖截取的運(yùn)行階段不同。但是，通過兩個(gè)圖的對(duì)比，很明顯可以看出滾動(dòng)的文字是在向上滾動(dòng)。19.2.4 設(shè)置滾動(dòng)方式設(shè)置滾動(dòng)方式behavi

5、or 基本語法基本語法 滾動(dòng)文滾動(dòng)文字字19.2.4 設(shè)置滾動(dòng)方式設(shè)置滾動(dòng)方式behavior 語法說明語法說明19.2.4 設(shè)置滾動(dòng)方式設(shè)置滾動(dòng)方式behavior 實(shí)例代碼19.2.4 設(shè)置滾動(dòng)方式設(shè)置滾動(dòng)方式behavior 接上頁接上頁19.2.4 設(shè)置滾動(dòng)方式設(shè)置滾動(dòng)方式behavior 網(wǎng)頁效果網(wǎng)頁效果19.2.4 設(shè)置滾動(dòng)方式設(shè)置滾動(dòng)方式behavior 效果說明效果說明 圖19-16、圖19-17和圖19-18三幅圖都是在文字滾動(dòng)過程中捕捉到的效果，其中圖19-16是滾動(dòng)一開始的效果，三組文字雖然滾動(dòng)方式不一樣，但是都在向左滾動(dòng)；到了圖19-17時(shí)，第一組文字滾動(dòng)一次完成，停止

6、在瀏覽器左邊，而第二組文字則開始轉(zhuǎn)向右邊滾動(dòng)，第三組文字還在繼續(xù)向左邊滾動(dòng)；圖19-18時(shí)，第一組文字依然停止不動(dòng)，第二和第三組文字則一起在向左滾動(dòng)。19.2.5 設(shè)置滾動(dòng)速度設(shè)置滾動(dòng)速度scrollamount 基本語法基本語法 滾動(dòng)滾動(dòng)文字文字19.2.5 設(shè)置滾動(dòng)速度設(shè)置滾動(dòng)速度scrollamount 實(shí)例代碼實(shí)例代碼19.2.5 設(shè)置滾動(dòng)速度設(shè)置滾動(dòng)速度scrollamount 接上頁接上頁19.2.5 設(shè)置滾動(dòng)速度設(shè)置滾動(dòng)速度scrollamount 網(wǎng)頁效果網(wǎng)頁效果19.2.5 設(shè)置滾動(dòng)速度設(shè)置滾動(dòng)速度scrollamount 效果說明效果說明 圖19-19中很像哥弟三個(gè)在賽跑，

7、大哥速度為每步20像素，二哥的速度為每步10像素，三弟的速度為每步5像素。比賽剛開始幾步，老大就喊“我是最快的”，老二有壓力了也忙說“我是三個(gè)中的第二名”，小三比較乖，只好抱歉說“不好意思”。19.2.6 設(shè)置滾動(dòng)延遲設(shè)置滾動(dòng)延遲scrolldelay 基本語法基本語法 滾動(dòng)文字滾動(dòng)文字19.2.6 設(shè)置滾動(dòng)延遲設(shè)置滾動(dòng)延遲scrolldelay 語法說明語法說明 延遲時(shí)間是以毫秒為單位的，毫秒就是千分之一秒。這個(gè)延遲時(shí)間設(shè)置得越小，滾動(dòng)得越快，延遲時(shí)間設(shè)置得如果過大，還會(huì)出現(xiàn)走走歇歇的效果。19.2.6 設(shè)置滾動(dòng)延遲設(shè)置滾動(dòng)延遲scrolldelay 實(shí)例代碼實(shí)例代碼19.2.6 設(shè)置滾動(dòng)延

8、遲設(shè)置滾動(dòng)延遲scrolldelay 接上頁接上頁19.2.6 設(shè)置滾動(dòng)延遲設(shè)置滾動(dòng)延遲scrolldelay 網(wǎng)頁效果網(wǎng)頁效果19.2.6 設(shè)置滾動(dòng)延遲設(shè)置滾動(dòng)延遲scrolldelay 效果說明效果說明 從圖19-20的文字內(nèi)容就可以理解，延遲時(shí)間設(shè)置的越小，其滾動(dòng)文字的速度則相對(duì)越快，沒有停頓；而延遲時(shí)間設(shè)置的越大，就是走走歇歇的感覺。而且在實(shí)際應(yīng)用過程中，延遲時(shí)間和滾動(dòng)速度要一起設(shè)置，這樣效果會(huì)更加明顯。19.2.7 設(shè)置滾動(dòng)范圍設(shè)置滾動(dòng)范圍width/height 基本語法基本語法 滾動(dòng)文字滾動(dòng)文字19.2.7 設(shè)置滾動(dòng)范圍設(shè)置滾動(dòng)范圍width/height 實(shí)例代碼實(shí)例代碼19.

9、2.7 設(shè)置滾動(dòng)范圍設(shè)置滾動(dòng)范圍width/height 語法說明語法說明 滾動(dòng)文字滾動(dòng)文字19.2.7 設(shè)置滾動(dòng)范圍設(shè)置滾動(dòng)范圍width/height 接上頁接上頁19.2.7 設(shè)置滾動(dòng)范圍設(shè)置滾動(dòng)范圍width/height 網(wǎng)頁效果網(wǎng)頁效果19.2.7 設(shè)置滾動(dòng)范圍設(shè)置滾動(dòng)范圍width/height 效果說明效果說明 圖19-21中，很明顯可以看出兩個(gè)背景范圍的寬度和高度都是不同的，而滾動(dòng)文字也只能在這兩個(gè)范圍內(nèi)滾動(dòng)。19.2.8 設(shè)置滾動(dòng)空白空間設(shè)置滾動(dòng)空白空間hspace/vspace 基本語法基本語法 滾動(dòng)文字滾動(dòng)文字19.2.8 設(shè)置滾動(dòng)空白空間設(shè)置滾動(dòng)空白空間hspace/

10、vspace 語法說明語法說明 水平范圍和垂直范圍也是用數(shù)字表示，單位均為像素。19.2.8 設(shè)置滾動(dòng)空白空間設(shè)置滾動(dòng)空白空間hspace/vspace 實(shí)例代碼實(shí)例代碼19.2.8 設(shè)置滾動(dòng)空白空間設(shè)置滾動(dòng)空白空間hspace/vspace 接上頁接上頁19.2.8 設(shè)置滾動(dòng)空白空間設(shè)置滾動(dòng)空白空間hspace/vspace 網(wǎng)頁效果網(wǎng)頁效果 19.2.8 設(shè)置滾動(dòng)空白空間設(shè)置滾動(dòng)空白空間hspace/vspace 效果說明效果說明 圖19-22中，為了使?jié)L動(dòng)文字空白空間更明顯，所以將滾動(dòng)文字都放到了水平線內(nèi)。水平線和滾動(dòng)文字背景之間的空白為垂直空白空間，滾動(dòng)文字背景和瀏覽器邊框之間空白為水平空白空間。19.2.9 設(shè)置滾動(dòng)循環(huán)設(shè)置滾動(dòng)循環(huán)loop 基本語法基本語法 滾動(dòng)文字滾動(dòng)文字19.2.9 設(shè)置滾動(dòng)循環(huán)設(shè)置滾動(dòng)循環(huán)loop 語法說明語法說明 循環(huán)次數(shù)直接