滾動字幕會讓很多人感到興奮，特別是第一次使用滾動字幕時，會愛不釋手。滾動字幕我也做得不少了，對它也不會興奮了，所以現(xiàn)在也用得不多了。有不少朋友常問到這是怎么做的，現(xiàn)在做一個詳細的專題，讓你更全面地了解一下。
滾動字幕在FrontPage的組件里有，但是FrontPage這個軟件只能支持單行文字，一出現(xiàn)多行文字它就無能為力了，而且它只能支持一行滾動！Dreamweaver也只能用編寫HTML代碼的方法。所以建議用記事本打開網(wǎng)頁源代碼來編輯。
1.建立第一個滾動字幕。代碼：
<marquee scrollAmount=2 width=300>歡迎光臨</marquee>
效果如：
2.各參數(shù)詳解：
a)scrollAmount。它表示速度，值越大速度越快。如果沒有它，默認為6，建議設(shè)為1～3比較好。
b)width和height，表示滾動區(qū)域的大小，width是寬度，height是高度。特別是在做垂直滾動的時候，一定要設(shè)height的值。
c)direction。表示滾動的方向，默認為從右向左：←←←?？蛇x的值有right、down、up。滾動方向分別為：right表示→→→，up表示↑，down表示↓。
d)scrollDelay，這也是用來控制速度的，默認為90，值越大，速度越慢。通常scrollDelay是不需要設(shè)置的。
e)behavior。用它來控制屬性，默認為循環(huán)滾動，可選的值有alternate(交替滾動)、slide(幻燈片效果，指的是滾動一次，然后停止?jié)L動)
3.實例：
a)如何給滾動字幕加超鏈接？這跟平時的超鏈接是完全一樣的。只要在文字外面加上<a href=***>和</a>就可以了。如下效果，代碼是<marquee _fcksavedurl=***>和</a>就可以了。如下效果，代碼是<marquee _fcksavedurl="***>和</a>就可以了。如下效果，代碼是<marquee" scrollAmount=2 width=300><a href=http://www.>杭州網(wǎng)通</a></marquee>，點擊杭州網(wǎng)通就可以進入了：
b)如何制作當鼠標停留在文字上，文字停止?jié)L動？
代碼如：
<marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>鼠標懸停</marquee>
效果如：
c)交替效果。代碼如：
<marquee scrollAmount=2 width=99 behavior=alternate>交替效果</marquee>
效果如：
d)多行文本向上滾動。代碼如：
<marquee scrollAmount=2 width=300 height=160 direction=up>·床前明月光<br>·疑是地上霜<br>·舉頭望明月<br>·低頭思故鄉(xiāng)<p>·<a href=http://www.>我的網(wǎng)站</a></marquee>
效果如：
·疑是地上霜
·舉頭望明月
·低頭思故鄉(xiāng)
·我的網(wǎng)站
e)改變滾動字幕的顏色？可以用樣式表來控制。如下效果，代碼是<marquee scrollAmount=2 width=300><a style=color:FF0000></a></marquee>。
圖片的滾動
已有兩位朋友來電話咨詢此問題，在此做個實例。這里還是用到marquee語句。
滾動字幕，在FrontPage或Dreamweaver下無法直接編輯，只能用記事本編寫HTML語言這一途徑。為了防止這段marquee語句被FrontPage或Dreamweaver格式化，所以把marquee嵌入到JavaScript的document.write文檔中。
HTML語言對初學者來說是很難的，但如果要想會做網(wǎng)頁，學習HTML是肯定的。
1、marquee的HTML語法，請見我寫的這篇：《專題：滾動字幕制作手冊》，這里可以暫時不看。
2、圖片的HTML標簽是img，語法是<img src="圖片路徑/文件名">，這里的路徑要使用相對路徑，關(guān)于相對路徑，請見《相對路徑概念詳解(圖)》
了解了marquee和img的用法，就可以輕松制作了。實例效果：
上述效果的代碼如：
|
|
文件(F) 編輯(E) 搜索(S) 幫助(H)
<script>document.write('<marquee scrollAmount=2 width=340 height=160 direction=up onmouseover=stop() onmouseout=start()><a href=http://www.><img src=../../j/01.jpg border=0></a></marquee>')</script>
|
|
|
問1：scrollAmount=2 width=340 height=160 direction=up onmouseover=stop() onmouseout=start()這些表示什么？
其中height表示區(qū)域的高度。
問2：如何插入圖片？
用<img src=相對路徑/文件名>的語句。并且要注意圖片名不要中文，要注意區(qū)分英文大小寫。
問3：如何為圖片做超鏈接？
答：用<a href=>和</a>把<img>包圍，并且img必須設(shè)border=0，否則圖片會出現(xiàn)藍框。正確的例子如：<a href=http://www.><img src=../../j/01.jpg border=0></a>
其中a href=表示超鏈接，這是最常用的。練習的方法也很簡單，就是平時用FP或DW做網(wǎng)頁的時候，要多查看源代碼。
問4：如何做多張圖片排列滾動？
答：通常圖片和圖片之間用<br>(回行)或<p style=margin-top:9>(精確調(diào)整圖片間的距離)來鏈接。也可以把你的圖片先用表格排版，然后把這個表格的所有語句也加入到marquee中，讓這個表格來滾動。
滾動字幕效果：
<MARQUEE ScrollAmount=3 Direction=up width=400 height=40 ScrollDelay=150 >
<center><FONT face=黑體 color=#FFAA00 size=5>
黑馬來教你如何制作滾動字幕<br>
滾動字幕需要用到 marquee 元素<br>
MARQUEE 的主要參數(shù)及其含義是<br>
Derection：文字滾動方向<br>
Width 和 Height：窗口的寬度和高度<br>
ScrollDelay：延遲(單位為毫秒)<br>
ScrollAmount：移動的步長<br>
最后別忘了用 br 給每一行文字換行<br>
現(xiàn)在，你也可以制作滾動字幕了吧？<br>
</font></center>
</MARQUEE>
效果如下：
3HTML滾動字幕的制作
1、〈元素名〉文件或超文本〈/元素〉
2、〈元素名 屬性名=“屬性值...”〉文件或超文本〈/元素〉
3、〈元素名〉
示范：
<html>
<body>
<div aligh="center">
<TABLE border=0 cellpadding=0 cellspacing=0
height=157 width=320>
<TBODY>
<TR>
<TD height=156 valign=top width=320>
<marquee direction=up height=156
onmouseout=this.scrollamount=1
onmouseover=this.scrollamount=0
scrollamount=1 scrolldelay=20
scrollleft="0" scrolltop="0">
靖邊中學第一行<br>
現(xiàn)代教育技術(shù)中心第二行<br>
我們要努力學習第三行<br>
</marquee>
</td>
</tr>
</table>
</div>
</body>
</html>
- HTML的基本結(jié)構(gòu)
<html>
<head>
<title>標題</title>
</head>
<bo***>
顯示的html內(nèi)容
</bo***>
</html>
- 修飾文本標簽
<h1>標題1</h1>
...
<h6>標題6</h6>
<font>文字<font>
- 網(wǎng)頁元素標簽
<img>
<a>鏈接</a>
<form>
<Input type="text/password">
<input type="radio/checkbox">
<input type="submit/reset/button">
<input type="image">
<select></select>
<input type="file">
<textarea></textarea>
</form>
- 布局標簽
<p>段落</p>
<br>
<hr>
<div>塊內(nèi)容</div>
<table>
<tr>
<td>單元格內(nèi)容</td>
</tr>
</table>
<frameset>
<frame>
<frame>
</frameset>
- 其他標簽
<link>
<meta>
<style></style>
<script></script>
- 標簽的常見屬性參數(shù)
指向性：href、src、action，找到一個圖片的位置、說明網(wǎng)頁轉(zhuǎn)向的url或者找到用于處理表單的應(yīng)用程序文件。
基本屬性：face、size、width、height、color、align、alt、bgcolor、border，聲明字體、大小、寬高、顏色、對齊等。
參數(shù)聲明：type、name、class、value、method。
滾動字幕
marquee為滾動字幕標記,應(yīng)用格式為:
<marquee>...</marquee>
屬性:
align 指定對齊方式top,middle,bottom
behavior指定動畫的運動屬性;
scroll單向運動,
slide如幻燈片,一格格的，效果是文字一接觸左邊就停止。
alternate左右往返運動
direction 設(shè)定文字的卷動方向,left表示向左,right表示向右
bgcolor="#0000FF" 設(shè)定文字卷動范圍的背景顏色。
loop設(shè)定文字卷動次數(shù)，其值可以是正整數(shù)或 infinite表示無限次。
height="30" 設(shè)定字幕高度
width="150" 設(shè)定字幕寬度
scrollamount="30" 指定每次移動的距離,距離越大速度越快
scrolldelay="500" 文字卷動的停頓時間，單位是毫秒。時間越短滾動越快;
hspac 指定字幕左右空白區(qū)的大小
vspac 指定字幕上下空白區(qū)的大小
示例1：
<html>
<body>
<font face="字體2" size=6 color="#ff0000">
滾動字幕寬度設(shè)置
</font><br>
<marquee width=250>滾動字幕</marquee>?
</body>
</html>
示例2：
<html>
<body>
<font face="字體2" size=6 color="#ff0000">
滾動字幕左右往返運動設(shè)置
</font><br>
<marquee behavior=alternate>左右往返運動</marquee>?
</body>
</html>
示例3
<html>
<body>
<font face="字體2" size=6 color="#ff0000">
滾動字幕接觸左邊停止
</font><br>
<marquee behavior=slide>文字一接觸左邊就停止</marquee>?
</body>
</html>
示例4
<html>
<body>
<font face="字體2" size=6 color="#ff0000">
滾動字幕移動速度
</font><br>
<marquee scrolldelay=50>滾動字幕移動速度</marquee>
</body>
</html>
示例5
<html>
<body>
<font face="字體2" size=6 color="#ff0000">
滾動字幕移動距離
</font><br>
<marquee scrollamount="3" >滾動字幕移動距離</marquee>
</body>
</html>
如何使用上下滾動字幕？
|
代碼如下：
<TABLE height=300 cellPadding=10 width=500 align=center background=http://image13.360doc.com/DownloadImg/2010/08/0112/4365226_16.gifborder=3 table="0">
<TBODY>
<TR>
<TD>
<DIV align=center><FONT face=楷體_GB2312><FONT size=4><FONT color=#ffffff></FONT></FONT></FONT>
<MARQUEE style="WIDTH: 380px; HEIGHT: 84px" scrollAmount=2 direction=up height=84><FONTcolor=#ff00ff>
<DIV align=center><FONT face=楷體_GB2312 color=#c709f7 size=4>如何在圖片中加入文字？</FONT></DIV>
<DIV align=center><FONT face=楷體_GB2312 color=#c709f7 size=4></FONT><BR></DIV>
<DIV align=center><FONT face=楷體_GB2312 color=#1ae66b size=4>如何在圖片中加入文字？</FONT></DIV>
<DIV align=center><FONT face=楷體_GB2312 color=#1ae66b size=4></FONT><BR></DIV>
<DIV align=center><FONT face=楷體_GB2312 color=#ffff00 size=4>如何在圖片中加入文字？</FONT></DIV>
<DIV align=center><FONT face=楷體_GB2312 color=#ffff00 size=4></FONT><BR></DIV>
<DIV align=center><FONT face=楷體_GB2312><FONT size=4><FONT color=#ffffff>如何在圖片中加入文字？</FONT></FONT></FONT></DIV></FONT></MARQUEE></DIV></TD></TR></TBODY></TABLE>
==============================
文字上下滾動代碼：<MARQUEE style="WIDTH: 380px; HEIGHT: 84px" scrollAmount=2 direction=up height=84><FONTcolor=#ff00ff>注：scrollAmount=2 是控制字速，數(shù)值越大字速就越快！
如何在新浪博客種植組滾動字幕？
用<marquee></marquee>語句可以做到字幕的滾動，方法如下：
第一步、登錄新浪博客，輸入“登錄名”“密碼”和“驗證碼”后點擊“登錄”。
登錄新浪博客
第二步、進入首頁右上方的“控制面板”。
進入控制面板
第三步、進入“個人首頁維護”。
進入個人首頁維護
第四步、進入“自定義空白面板欄”。
進入自定義空白面板欄
第五步、點擊“增加”增加空白面板。
增加空白面板
第六步、填好面板標題，勾選文本框下方的“顯示源代碼”勾選框，記住，一定要勾選否則面板無法添加，在文本框中添加下面代碼，然后點擊保存。
<MARQUEE scrollAmount=1 scrollDelay=77 direction=up width=270 height=77
onmouseout="this.start()" onmouseover="this.stop()">你好！
<BR>歡迎
<BR>來到
<BR>我的
<BR>博客</MARQUEE>
代碼說明：
1、scrollAmount。它表示速度，值越大速度越快。如果沒有它，默認為6，建議設(shè)為1～3比較好。
2、width和height，表示滾動區(qū)域的大小，width是寬度，height是高度。特別是在做垂直滾動的時候，一定要設(shè)height的值。
３、direction。表示滾動的方向，默認為從右向左：←←←?？蛇x的值有right、down、up。滾動方向分別為：right表示→→→，up表示↑，down表示↓。
４、scrollDelay，這也是用來控制速度的，默認為90，值越大，速度越慢。通常scrollDelay是不需要設(shè)置的。
５、behavior。用它來控制屬性，默認為循環(huán)滾動，可選的值有alternate(交替滾動)、slide(幻燈片效果，指的是滾動一次，然后停止?jié)L動) 。
?。丁⒚啃形淖痔砑釉?lt;br></br>之間。
貼入代碼，點擊“保存”
第七步、點擊“控制面板”左側(cè)“BLOG信息設(shè)置”中的“定制我的首頁”。
點擊定制我的首頁
第八步、點擊“添加模塊”。
點擊添加模塊
第九步、勾選剛剛建立的模板，點擊下方的“選取”。
選取面板
第十步、出現(xiàn)在頁面上，將之托拽到合適的位置上點擊“保存設(shè)置”，完成播放器面板添加。
面板添加完成
<marquee scrollAmount=2 width=300>魚過大海歡迎光臨</marquee>
