html設(shè)置滾動文字

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

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

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

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

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

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

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

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

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

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