我們在瀏覽網(wǎng)頁時(shí)，?？吹揭恍┚W(wǎng)頁中的文字會有規(guī)律的滾動。那么，這些滾動文字是怎樣制作出來的呢？我通過學(xué)習(xí)和實(shí)踐，現(xiàn)將用編寫HTML代碼讓文字實(shí)現(xiàn)滾動效果的方法整理出來與朋友們交流分享。
一、基礎(chǔ)知識：
HTML是Hypertext Markup Language(超文本標(biāo)記語言)的縮寫，是用來表示網(wǎng)上信息的符號標(biāo)記語言。WWW(萬維網(wǎng))所使用的出版語言就是HTML語言。通過HTML，將所需要表達(dá)的信息按某種規(guī)則寫成HTML文件，通過專用的Web瀏覽器來識別，并將這些HTML翻譯成可以識別的信息，就是所見到的網(wǎng)頁。
用HTML的語法規(guī)則建立的文檔可以運(yùn)行在不同操作系統(tǒng)的平臺上，HTML文檔屬于純文本文件，可以用任意的文本編寫器書寫。
HTML文件由標(biāo)記和被標(biāo)記的內(nèi)容組成。標(biāo)記能產(chǎn)生所需的各種效果。這些標(biāo)記名稱大都為相應(yīng)的英文單詞首字母或縮寫，如P表示Paragraph(段落)，IMG是Image(圖象)的縮寫。各種標(biāo)記的效果差別很大，但總的表示形式卻大同小異，大多數(shù)成對出現(xiàn)，格式為：
<標(biāo)記> 受標(biāo)記影響的內(nèi)容</標(biāo)記>
標(biāo)記只是規(guī)定這是什么信息，文本或是圖片，但怎樣顯示或控制這些信息，就需要在標(biāo)記后面加上相關(guān)的屬性來表示，每個(gè)標(biāo)記有一系列的屬性。標(biāo)記要通過屬性來制作出各種效果。格式為：
<標(biāo)記 屬性1=屬性值 屬性2=屬性值 ……> 受影響的內(nèi)容 </標(biāo)記>
說明：
1)并不是所有的標(biāo)記都有屬性，如換段標(biāo)記<P>就沒有屬性。
2)根據(jù)需要可以用該標(biāo)記的所有屬性，也可以只用需要的幾個(gè)屬性。
3)在使用時(shí)，屬性之間沒有順序。
4)標(biāo)記忽略大小寫，如：< HTML >和< html >是等效的。
二、讓文字產(chǎn)生滾動效果的標(biāo)記
<marquee> 受影響的內(nèi)容 </marquee>
1.文字來回滾動---示例代碼：
<marquee scrollAmount=2 width=300 behavior=alternate>來回滾動的文字</marquee>
2.多行文本向上滾動---示例代碼：
<marquee scrollAmount=2 width=300 height=160 direction=up>朋友，你好！<br>你會做文字滾動效果嗎？<br>歡迎你閱讀本文！<p>和我一同來實(shí)踐吧。</marquee>
3.各參數(shù)詳解：
a)scrollAmount屬性表示速度，屬性值為數(shù)字；取值越大速度越快。如果沒有它，默認(rèn)為6，建議設(shè)為1～3比較好。
b)width和height屬性表示滾動區(qū)域的大小，width是寬度，height是高度，屬性值為像素?cái)?shù)（數(shù)字）。特別是在做垂直滾動的時(shí)候，一定要設(shè)height的值。
c)direction屬性表示文字滾動的方向，缺省默認(rèn)為從右向左滾動；可選的屬性值有l(wèi)eft(從右向左滾動)、right(從左向右滾動)、down(從上向下滾動)、up(從下向上滾動)。
d)scrollDelay屬性也是用來控制速度的，默認(rèn)為90，值越大，速度越慢。通常scrollDelay是不需要設(shè)置的。
e)behavior屬性是用來控制文字的滾動方式，缺省時(shí)默認(rèn)為循環(huán)滾動，可選的值有scroll(循環(huán)滾動，一圈一圈繞著走)、alternate(在滾動區(qū)域內(nèi)來回游動)、side(只走一次)。
我們也可以在字體標(biāo)記＜FONT＞中設(shè)置文字的大小、字體、顏色等屬性。參見下面的實(shí)例代碼。
由上可以看出，HTML代碼是可以隨意組合的，功能強(qiáng)大！
實(shí)例
文字往上滾動制作的代碼
<MARQUEE WIDTH=570 HEIGHT=300 scrollAmount=3 direction=up>
<P align=left><FONT face=華文行楷 color=#ff0000 size=18>朋友，您好！</FONT></P>
<P align=left><FONT face=華文行楷 color=#ff0000 size=18>您會做文字滾動效果嗎？</FONT></P>
<P align=left><FONT face=華文行楷 color=#ff0000 size=18>歡迎您閱讀本文。</FONT></P>
<P align=left><FONT face=華文行楷 color=#ff0000 size=18>我們一起來實(shí)踐吧！</FONT></P>
</MARQUEE></P></TD></TR></TBODY></TABLE></P>
文字往下滾動制作的代碼
<MARQUEE WIDTH=570 HEIGHT=300 scrollAmount=3 direction=down>
<P align=center><FONT face=華文行楷 color=#ff0000 size=18>感受快樂！</FONT></P>
<P align=center><FONT face=華文行楷 color=#ff0000 size=18>體驗(yàn)成功！</FONT></P>
<P align=center><FONT face=華文行楷 color=#ff0000 size=18>親自動手！</FONT></P>
<P align=center><FONT face=華文行楷 color=#ff0000 size=18>朋友您好！</FONT></P>
</MARQUEE></P></TD></TR></TBODY></TABLE></P>
文字往左滾動制作的代碼
<MARQUEE WIDTH=500 HEIGHT=400 scrollAmount=3 >
<P align=center><FONT face=華文行楷 color=#ff0000 size=18>朋友您好！</FONT></P>
<P align=center><FONT face=華文行楷 color=#ff0000 size=18>親自動手！</FONT></P>
<P align=center><FONT face=華文行楷 color=#ff0000 size=18>體驗(yàn)成功！</FONT></P>
<P align=center><FONT face=華文行楷 color=#ff0000 size=18>感受快樂！</FONT></P>
</MARQUEE></P></TD></TR></TBODY></TABLE></P>
文字往右滾動制作的代碼
<MARQUEE scrollAmount=3 WIDTH=500 HEIGHT=400 direction=right>
<P align=center><FONT face=華文行楷 color=#ff0000 size=18>！好您友朋</FONT></P>
<P align=center><FONT face=華文行楷 color=#ff0000 size=18>！手動自親</FONT></P>
<P align=center><FONT face=華文行楷 color=#ff0000 size=18>！功成驗(yàn)體</FONT></P>
<P align=center><FONT face=華文行楷 color=#ff0000 size=18>！樂快受感</FONT></P>
</MARQUEE></P></TD></TR></TBODY></TABLE></P>
