跑马灯 详解

<marquee>跑馬燈內容</marquee>
跑馬燈有許多的屬性可以設定，這樣你的跑馬燈看起來就會有許多花樣和變化。 

bgcolor-跑馬燈背景顏色
用法： <marquee bgcolor="色碼"> 
說明：設定跑馬燈的背景顏色 

behavior-顯示型態
用法： <marquee behavior="顯示型態">
說明：顯示型態有三種：scroll，跑馬燈字幕會從一端出現，再從另一端捲入。slide，當跑馬燈文字跑完後就會停止不動，如投影片一樣。alternate，跑馬燈文字在兩邊來回跑動。 

direction-跑動方向
用法： <marquee direction="方向">
說明：設定跑馬燈跑動的方向，它的設定方向有left（左邊）和right（右邊）。預設值為left。 

loop-捲動次數
用法： <marquee loop="數值"> 說明：設定跑馬燈捲動的次數，若將loop的數值設為-1或infinite，那跑馬燈會無限的捲動。 

width-寬度
用法： <marquee width="寬度"> 
說明：設定跑馬燈的寬度，以pixel為單位或是螢幕的百分比表示。 

height-高度
用法： <marquee height="高度">
說明：設定跑馬燈的高度，以pixel為單位或是螢幕的百分比表示。

以下是各种效果：
01 左右彈動 <marquee behavior=Alternate width=150>左右彈來彈去</marquee>

02 上下彈動 <marquee behavior=Alternate direction=up height=50>上下彈來彈去</marquee>

03 四周彈動 <marquee direction=down behavior=alternate scrollamount=4 width=150 height=70><marquee behavior=alternate>四周彈來彈去</marquee></marquee>

04 右上下浮 <marquee direction=up behavior=alternate scrollamount=4 height=70><marquee direction=right behavior=alternate>往右上下浮彈</marquee></marquee>

05 左上下浮 <marquee direction=up behavior=alternate scrollamount=4 height=70><marquee direction=left behavior=alternate>往左上下浮彈</marquee></marquee>

06 左跑速度 <marquee direction=left scrollamount=3>往左跑的速度</marquee>

07 右跑速度 <marquee direction=right scrollamount=3>往右跑的速度</marquee>

08 上跑速度 <marquee direction=up scrollamount=3 height=50>往上跑的速度</marquee>

09 下跑速度 <marquee direction=down scrollamount=3 height=50>往下跑的速度</marquee>

10 左跑緩慢 <marquee direction=left scrollamount=1>超緩慢速度往左移動</marquee>

11 右跑緩慢 <marquee direction=right scrollamount=1>超緩慢速度往右移動</marquee>

12 左跑消失 <marquee direction=left loop=2 scrollamount=5>往左移動兩次即可消失</marquee>

13 右跑消失 <marquee direction=right loop=2 scrollamount=5>往右移動兩次即可消失</marquee>

14 左跑停止 <marquee direction=left behavior=slide>往左跑到尾停止</marquee>

15 右跑停止 <marquee direction=right behavior=slide>往右跑到尾停止</marquee>

16 左移脫拉 <marquee direction=left scrolldelay=500>拖拉速度往左移</marquee>

17 右移脫拉 <marquee direction=right scrolldelay=500>拖拉速度往右移</marquee>

18 左移停走 <marquee direction=left scrolldelay=500 scrollamount=100>往左停停走走</marquee>

19 右移停走 <marquee direction=right scrolldelay=500 scrollamount=100>往左停停走走</marquee>

20 左跑閃梭 <marquee direction=left scrollamount=300>快速閃梭往左跑</marquee>

21 右跑閃梭 <marquee direction=right scrollamount=300>快速閃梭往右跑</marquee>

22 兩段行走 <marquee direction=left width=100>往左邊</marquee><marquee direction=right width=100>往右邊</marquee>

23 三段行走 <marquee direction=right width=100>往右</marquee><marquee behavior=alternate width=80>左右彈</marquee><marquee width=100>往左</marquee>

24 左移被色 <marquee direction=left bgcolor=FFFFF0 scrollamount=3>往左移動另加被景顏色</marquee>

25 右移被色 <marquee direction=right bgcolor=FFFFF0 scrollamount=3>往右移動另加被景顏色</marquee>

26 左移被景 <marquee direction=left style=background:url(路徑) scrollamount=3>被景隨著文字往左移動</marquee>

27 右移被景 <marquee direction=right style=background:url(路徑) scrollamount=3>被景隨著文字往右移動</marquee>

28 右斜行走 <marquee direction=up scrollamount=3 height=100><marquee direction=right>往右斜上跑</marquee></marquee>

29 左斜行走 <marquee direction=up scrollamount=3 height=100><marquee direction=left>往左斜上跑</marquee></marquee>

30 右斜下跑 <marquee direction=down scrollamount=3 height=100><marquee direction=right>往右斜下跑</marquee></marquee>

31 左斜下跑 <marquee direction=down scrollamount=3 height=100><marquee direction=left>往左斜下跑</marquee></marquee>

32 右浮尾彈 <marquee direction=up behavior=alternate scrollamount=4 height=70><marquee direction=right behavior=slide>右浮至尾上下彈動</marquee></marquee>

33 左浮尾彈 <marquee direction=up behavior=alternate scrollamount=4 height=70><marquee direction=left behavior=slide>左浮至尾上下彈動</marquee></marquee>

 

<marquee οnmοuseοver=this.stop(); οnmοuseοut=this.start();>鼠标事件</marquee>