走馬燈,跑馬燈語法

2016-04-10
1---走馬燈（左進右出式）
<marquee>要出現的字</marquee>
一般基本的為左進右出式的走馬燈，亦可加上背景色。

改變跑馬燈的底色:

<marquee bgcolor="#000000">輸入要跑的文字</marquee>

<marquee>奕辰ㄉ網站架設VS中華電信網站平台系統</marquee>
奕辰ㄉ網站架設VS中華電信網站平台系統

加上bgcolor=背景顏色的色碼
<marquee bgcolor=ffcc00>奕辰ㄉ網站架設VS中華電信網站平台系統</marquee>
奕辰ㄉ網站架設VS中華電信網站平台系統


2---走馬燈（左右來回式）
<marquee behavior=alternate>要出現的字</marquee>
即為左右來回式的走馬燈，亦可加上背景色。
<marquee behavior=alternate>奕辰ㄉ網站架設VS中華電信網站平台系統</marquee>
奕辰ㄉ網站架設VS中華電信網站平台系統
<marquee behavior=alternate bgcolor=ffcc00>奕辰ㄉ網站架設VS中華電信網站平台系統</marquee> 奕辰ㄉ網站架設VS中華電信網站平台系統

3---格式大小的變化
<marquee width=m%>要出現的字</marquee>
除了可改背景外，長度也是可以更改的。

改變跑馬燈寬高:

<marquee height"1"width="1">輸入要跑的文字</marquee>

紅色字請自行更改。

數字越大，跑馬燈越高.寬。

<marquee width=50%>奕辰ㄉ網站架設VS中華電信網站平台系統</marquee>
奕辰ㄉ網站架設VS中華電信網站平台系統
<marquee behavior=alternate bgcolor=ffffcc width=70%>奕辰ㄉ網站架設</marquee>
中華電信網站平台系統


4---走馬燈不只是走馬燈
走馬燈不只是走馬燈

改變跑馬燈的速度:

<marquee scrollamount="1">輸入要跑的文字</marquee>

紅色字請自行更改。

數字越大，速度越快。

其實它的彈性很大，可以作多元化的修改皆會得到很有趣的效果，當然，這就讓讀者有點事作，自行去摸索了，什麼～不教你要打偶，厚～粉丫裂哦！想打偶～來丫
<marquee scrollamount="321">我閃我閃～打不到</marquee>
厚～粉丫裂哦！想打偶～來丫

打不到
我閃我閃～打不到

這個也是走馬燈的變化唷！
複習一下，先偷懶一下^(++++++++++++++++)^
不知又幾天沒睡了～打瞌睡中.. zZ


5---分別設定屬性「DIRECTION="UP、DOWN、LEFT、RIGHT"」

HTML marquee 跑馬燈可用的參數如下

  • 方向設定：direction="參數值"；可設定 up（向上）、dun（向下）、left（向左）、right（向右）。
  • 對齊設定：align="參數值"；可設定 top（向上對齊）、midden（垂直至中）、botton（向下對齊）。
  • 速度設定：scrollamount="參數值" ；可設定為數字，通常設定 1~10 的範圍，數字越大跑得越快。
  • 長度設定：height="參數值"；數字，自行設定。
  • 寬度設定：width="參數值"；數字，自行設定。
  • 行為設定：behavior="參數值"；可設定 alternate（來回跑）、slide（跑入後停止）。
  • 背景顏色：bgcolor="參數值"；可設定為顏色的色碼，不設定則沒有顏色。


往左
<marquee width="500" bgcolor="#f9f7b3" direction="LEFT"><span style="font-size: 10pt;"><span style="color: #1a73e1;">往左</span></span></marquee>

<marquee width="16" height="70" bgcolor="#f9f7b3" direction="DOWN"><span style="font-size: 10pt;"><span style="color: #1a73e1;">往下</span></span></marquee>


<marquee width="16" height="70" bgcolor="#f9f7b3" direction="UP"><span style="font-size: 10pt;"><span style="color: #1a73e1;">往上</span></span></marquee>



<marquee width="500" bgcolor="#f9f7b3" direction="RIGHT"><span style="font-size: 10pt;"><span style="color: #1a73e1;">往右</span></span></marquee>


往左
往下 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX往上
往右

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

 插入上框
插入左框插入跑馬燈插入右框
插入下框

  
 

（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"」
奕辰ㄉ網站架設～

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

12

加入圖片的跑馬燈語法:

<marquee><img src="圖片的網址 " width="1 " height="1"> </marquee>

紅色字為該圖的圖寬.圖高，請自行更改。

13 

加入超連結的跑馬燈語法:

<marquee><a href="連結到的網址" target="_blank">超連結的文字</a</marquee>



 14

滑鼠移入就會停止移動的跑馬燈語法:

<marquee onMouseOver="this.stop()" onMouseOut="this.start()"> 輸入要跑的文字</marquee>

 

 

文字框跑馬燈 語法：

<div align="center">
<table style="color:white; font-size:10pt" border="1" style="color:white; font-size:10pt" bordercolor="#FF9900">
<td background="圖檔網址.gif">
<p>
<font color="#FFFF00" face="新細明體" size="2">
<marquee scrollamount='2' scrolldelay='150' direction= 'up' width='105' id=xiaoqing height='120' onmouseover=xiaoqing.stop()
onmouseout=xiaoqing.start() style="color: #0000FF; font-size: 10pt; font-weight: bold; font-family:新細明體">文字跑馬燈公告欄<br>在這輸入文字內容<br></marquee>
</font></td></table>

回最新消息