跑馬燈(走馬燈),是網頁上文字會以垂直或平移方式「捲動」的效果。
個人最早使用是用在頁尾欄上!不知有多少人會去看到它...XD!
這次則是用在公告欄,因為它能使版面顯得比較精簡。
文字都拉開變成一行在飛,就不會堆得落落長了!
當然,用得太多可能也會使人有另一種眼花撩亂的感覺...XD!
基礎的語法:
<marquee>物件</marquee>
只要這樣就已經會跑了,很簡單。
物件可以是圖、連結、文字、文字加字型變化語法..。
反正是:「只要夾在這個語法中間的東西就是會一起跑」就對了!
所以連結也可以帶著跑、圖片也行。
記得最後要用</marquee>封閉語法,不然可能整個<marquee>以下的東西都會變得很好笑。
(HTML的語法多是一個開始符配一個結束符,就像括弧是成對的)
變化屬性(參數):
屬性加在開始的<marquee 屬性>中,每個屬性間用半形空格分開。可以任意組合想要的屬性。
有些屬性是預設(默認)的=不用特別寫出,這個語法本身就會如此執行。
因為屬性很多,所以預設的值可以儘量省略,免得語法落落長!
對齊:align="x"
x=top(上), midden(中), botton(底,預設), center(中央), left(左), right(右)
方向:direction="x"
x=up(上), left(左,預設), right(右), dun(下)
動作:behavior="x"
x=alternate(來回),
slide(快速跑完且不重覆),
scroll(重覆跑,預設屬性)
速度:scrollamount="n"(每次滾動移動距離)
n=自然數,越大越快!(預設值是6,有點快,1~3較好)
scrolldelay="n"(每次滾動停留時間(ms))
n=自然數,越大越慢...。(預設值是85,有點快)
區域:高:height="n"
寬:width="n"
n=滾動區域大小,預設是物件或欄位本身寬高。
邊距:hspace="n"(左右邊框寬)
vspace="n"(上下邊框寬)在字幕區域上下左右邊留距離。
預設值是 0(不留邊距)。
邊距是增加字幕作用範圍「之外」和旁邊的間隔。
背景色:bgcolor="#n"
n=RGB的編碼。
背景色不會作用到邊距的範圍。
滾動次數:loop="x"(設定滾動的次數)
x=-1,表示向左滾動無限次。
x=0,表示滾動無限次(預設屬性)
※若字幕寬小於欄位寬,預設是不滾動。
滑鼠: onMouseOver="this.stop()"(或onMouseOver="stop()")
:鼠標到區域內字幕停止滾動。
onMouseOut="this.start()"(或onMouseOut="start()")
:鼠標離開區域字幕開始滾動。
(要使滑鼠指到時停止,這兩個要一起寫)
例:
<marquee behavior="alternate" scrollamount="3" scrolldelay="100" height="50" width="250" hspace="10" vspace="10" bgcolor="#3339B5" onMouseOver="stop()" onMouseOut="start()">每次捲3相素、每次停留100ms、會來回捲動、區域設定、留邊、有背景色、遇到滑鼠會停!</marquee>
(有一個半形空格不顯示,所以換成全形,實際使用要用半形)
成果:
留邊距10相素的效果,是距左和上下行距有增加的感覺。
高興怎麼組合都行!只要用半形空格隔開各屬性(參數)就行。
除非有註明是次數或是ms(毫秒),寬高或距離的單位應該是「像素」。
一般來說,對齊、方向、區域、邊距、滾動次數,大多是不用去設定或更改的!就不一定要寫出來在語法中,只寫自己特別想要表現的變化就好,不然語法會很長!
只是記錄一下,方便自己以後查找。
...
沒有留言:
張貼留言