網頁跑馬燈語法教學 HTML marquee 程式設計

在剛開始學習網頁設計的時候，網頁跑馬燈肯定是必學的基礎，透過跑馬燈的點綴，可以輕鬆的讓網頁呈現效果生動起來，而且應用也是相當的廣泛，例如最新消息的呈現方式也可以採用跑馬燈的技巧，這裡教大家透過 HTML marquee 語法來製作跑馬燈的效果。

兩種不同的 HTML marquee 跑馬燈設計

基本款式（要跑的文字會依瀏覽器預設方向跑動）

<marquee>這裡放要跑的文字</marquee>

進階款式（參數可以設定要跑的方向與速度）

<marquee 這裡放參數設定>這裡放要跑的文字</marquee>

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

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

HTML marquee 跑馬燈範例

<marquee direction="right" height="30" scrollamount="5" behavior="alternate">跑馬燈測試</marquee>

呈現效果

跑馬燈測試

在這個範例中，我們設定了方向向右、高度為 30、速度為 5 以及來回跑動，其他屬性你就玩玩看吧！除了簡單的文字跑馬燈之外，還可以透過其他 HTML 標籤，製作更豐富的跑馬燈效果，例如使用 a href 標籤製作具有文字超連結的跑馬燈，使用 img 標籤製作圖片跑馬燈。

相關延伸閱讀