【HTML語法】跑馬燈 (MARQUEE) 語法的詳細教學－含全部屬性用法 @ 小君的友情世界

本文引用自min0427 - 【HTML語法】跑馬燈 (MARQUEE) 語法的詳細教學－含全部屬性用法

◆跑馬燈的基本語法＆執行預覽：
<marquee>顯示內容</marquee>
歡迎光臨企鵝碎碎唸～

◆全部屬性的使用說明＆執行預覽：

（1）

WIDTH="數值"

說明：

設定跑馬燈的寬度（單位：像素／px），若不指定則預設為版面寬度

預覽：

1.不加屬性「WIDTH=" "」
歡迎光臨企鵝碎碎唸～
1.
2.設定屬性「WIDTH="500"」
歡迎光臨企鵝碎碎唸～

（2）

HEIGHT="數值"

說明：

設定跑馬燈的高度（單位：像素／px），若不指定則預設為顯示內容的高度

預覽：

1.不加屬性「HEIGHT=" "」
歡迎光臨企鵝碎碎唸～

2.設定屬性「HEIGHT="30"」
歡迎光臨企鵝碎碎唸～

（3）

BEHAVIOR="屬性"

說明：

顯示內容的移動方式（省略時的預設值：SCROLL）
共有：不斷的由右循環至左／SCROLL、不斷的在左、右之間來回／ALTERNATE 以及
共有：由右滑動至左（一次）／SLIDE 這三種方式

預覽：

1.不加屬性「BEHAVIOR=" "」
歡迎光臨企鵝碎碎唸～

2.設定屬性「BEHAVIOR="SCROLL"」
歡迎光臨企鵝碎碎唸～

3.設定屬性「BEHAVIOR="ALTERNATE"」
歡迎光臨企鵝碎碎唸～

4.設定屬性「BEHAVIOR="SLIDE"」
歡迎光臨企鵝碎碎唸～

（4）

DIRECTION="屬性"

說明：

顯示內容的移動方向（省略時的預設值：LEFT）
共有：往上／UP、往下／DOWN、往左／LEFT 以及往右／RIGHT 這四個方向

預覽：

1.不加屬性「DIRECTION=" "」歡迎光臨企鵝碎碎唸～
2.分別設定屬性「DIRECTION="UP、DOWN、LEFT、RIGHT"」往左
往下	XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX	往上
往右

（5）

SCROLLAMOUNT="數值"

說明：

顯示內容每次的移動距離（省略時的預設值：6px）

預覽：

1.不加屬性「SCROLLAMOUNT=" "」
歡迎光臨企鵝碎碎唸～

2.設定屬性「SCROLLAMOUNT="6"」
歡迎光臨企鵝碎碎唸～

3.設定屬性「SCROLLAMOUNT="0"」（設為0的話，跑馬燈就完全不會移動了！）
歡迎光臨企鵝碎碎唸～

4.設定屬性「SCROLLAMOUNT="30"」
歡迎光臨企鵝碎碎唸～

（6）

SCROLLDELAY="數值"

說明：

顯示內容每次移動的間隔時間（省略時的預設值：85毫秒／ms）

預覽：

1.不加屬性「SCROLLDELAY=" "」
歡迎光臨企鵝碎碎唸～

2.設定屬性「SCROLLDELAY="85"」
歡迎光臨企鵝碎碎唸～

3.設定屬性「SCROLLDELAY="300"」
歡迎光臨企鵝碎碎唸～

4.設定屬性「SCROLLDELAY="500"」
歡迎光臨企鵝碎碎唸～

（7）

LOOP="次數"

說明：

顯示內容的執行次數（省略時的預設值：無限多次），輸入「0」即代表執行無限多次

預覽：

1.不加屬性「LOOP=" "」
歡迎光臨企鵝碎碎唸～

2.設定屬性「LOOP="0"」
歡迎光臨企鵝碎碎唸～

3.設定屬性「LOOP="1"」
歡迎光臨企鵝碎碎唸～

（8）

ALIGN="屬性"

說明：

顯示內容的對齊位置（省略時的預設值：BOTTOM）
共有：置頂／TOP、置中／MIDDLE 以及底部／BOTTOM 這三個位置

預覽：

1.不加屬性「ALIGN=" "」
歡迎光臨企鵝碎碎唸～

2.設定屬性「ALIGN="BOTTOM"」
歡迎光臨企鵝碎碎唸～

3.設定屬性「ALIGN="MIDDLE"」
歡迎光臨企鵝碎碎唸～

4.設定屬性「ALIGN="TOP"」
歡迎光臨企鵝碎碎唸～

註：因為ALIGN屬性無法適用於全部的瀏覽器，故建議最好直接在顯示內容上作設定！

（9）

HSPACE="數值"

說明：

左、右邊緣的空白空間（單位：像素／px），若不指定則預設為0px

預覽：

1.不加屬性「HSPACE=" "」
歡迎光臨企鵝碎碎唸～

2.設定屬性「HSPACE="0"」
歡迎光臨企鵝碎碎唸～

3.設定屬性「HSPACE="30"」

歡迎光臨企鵝碎碎唸～

（10）

VSPACE="數值"

說明：

上、下邊緣的空白空間（單位：像素／px），若不指定則預設為0px

預覽：

1.不加屬性「VSPACE=" "」
歡迎光臨企鵝碎碎唸～

2.設定屬性「VSPACE="0"」
歡迎光臨企鵝碎碎唸～

3.設定屬性「VSPACE="30"」

歡迎光臨企鵝碎碎唸～

（11）

BGCOLOR="顏色代碼"

說明：

設定跑馬燈的背景顏色（預設為白色／#FFFFFF 或 WHITE）

預覽：

1.不加屬性「BGCOLOR=" "」
歡迎光臨企鵝碎碎唸～

2.設定屬性「BGCOLOR="#FFFFFF"」
歡迎光臨企鵝碎碎唸～

3.設定屬性「BGCOLOR="#f9f7b3"」
歡迎光臨企鵝碎碎唸～

備註：

跑馬燈的預設背景及空白空間顏色皆為「白色」，而顯示內容的文字部份則為「黑色」
上方的預覽是為了強調而特意加以更改！！

◆備　註：
您除了可以如文章最上方的跑馬燈一般，在顯示內容的地方加上文字、連結以及圖片之外
還可以將整個跑馬燈的程式碼套入表格之中來加以美化，作法如下：
1. 先下載或自己製作一張與跑馬燈大小相符合的邊框圖片
2. 將圖片裁剪成上、下、左、右四個部份
3. 如下面的表格將跑馬燈以及上、下、左、右邊框的圖片分別插入表格之中就可以囉～