HTML Marquee 跑馬燈標籤完整指南：屬性、事件與實戰範例

前言：關於 <marquee> 你需要知道的事

<marquee> 是早期 Internet Explorer 專屬的非標準標籤，用於實現文字或圖片的滾動播放效果。雖然現代 Web 開發推薦使用 CSS Animation 或 JavaScript 實現更可控、標準化的滾動效果，但在維護舊專案、快速原型或特定相容性場景下，了解其完整屬性與行為仍有實用價值。本文整理了所有支援屬性、事件處理、常見樣式與可直接複製的完整範例。

一、 基本語法與最簡範例

<marquee><font size="+3" color="red">Hello, World</font></marquee>

預設行為：水平向左滾動、無限循環、滑鼠懸停不停止。

二、 核心屬性完整對照表

三、 互動事件：滑鼠控制滾動

最常見的需求是「滑鼠移入停止、移出繼續」：

<marquee 
  onmouseover="this.stop()" 
  onmouseout="this.start()">
  滑鼠移上停止，移開繼續滾動
</marquee>

• this.stop()：暫停滾動
• this.start()：恢復滾動

四、 完整屬性示範範例

<marquee 
  id="notice" 
  align="left" 
  behavior="scroll" 
  bgcolor="#FF0000" 
  direction="up" 
  height="300" 
  width="200" 
  hspace="50" 
  vspace="20" 
  loop="-1" 
  scrollamount="10" 
  scrolldelay="100" 
  onmouseover="this.stop()" 
  onmouseout="this.start()">
  這是一個完整配置的垂直向上滾動公告欄
</marquee>

五、 垂直向上公告欄實戰範例（含表格排版）

<div align="center">
  <table border="1" width="206" cellspacing="0" cellpadding="0" height="90">
    <tr>
      <td valign="top">
        <marquee onmouseover="this.stop()" onmouseout="this.start()" 
                 scrollamount="1" scrolldelay="100" direction="up" height="99%">
          <table cellspacing="0" cellpadding="0" width="95%" align="center" border="0">
            <tbody>
              <tr>
                <td valign="top" height="120">
                  <p><font color="#000033">·<a href="#">歡迎您惠臨！</a></font></p>
                  <p><font color="#000033">·<a href="#">更多劇本代碼...</a></font></p>
                  <p><font color="#000033">·<a href="#">一個學習型的原始碼網站...</a></font></p>
                  <p><font color="#000033">·<a href="#">如有建議請提交給我們...</a></font></p>
                  <p><font color="#000033">·<a href="#">異常感謝大家常常惠顧</a></font></p>
                  <p><font color="#000033">·<a href="#">再次感謝大家，再見</a></font></p>
                </td>
              </tr>
            </tbody>
          </table>
        </marquee>
      </td>
    </tr>
  </table>
</div>

六、 屬性行為互動測試區

以下提供可直接在瀏覽器執行的測試碼，可即時調整屬性觀察效果：

七、 現代替代方案建議

對於新專案，強烈建議使用以下標準化方案：

• CSS Animation：@keyframes scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } }，效能最佳、GPU 加速、可暫停/反向/響應式。
• JavaScript IntersectionObserver + requestAnimationFrame：完全可控、支援觸控拖曳、無障礙友善。
• 現成庫：Swiper、Marquee3000（無限無縫跑馬燈）。

八、 相容性與注意事項

• 非標準標籤：HTML5 規範未收錄，W3C 驗證會報警告。
• 瀏覽器支援：IE 全版本、Edge（IE 模式）、Chrome/Firefox/Safari 為相容性保留支援，但未來可能移除。
• 無障礙問題：螢幕閱讀器可能重複朗讀滾動內容，動態內容干擾認知障礙用戶，建議提供「暫停」按鈕或改用靜態列表。
• <marquee> 內部可包含任意流式內容（文字、圖片、表格、連結等）。

九、 總結

<marquee> 是一個時代的產物，以極簡單的宣告式語法解決了早期網頁「跑馬燈」需求。掌握其 11 個核心屬性與 2 個關鍵事件，足以應對維護舊系統或快速原型開發。但在現代 Web 應用中，請優先選擇 CSS Animation 或 JavaScript 方案，以獲得更好的效能、無障礙支援與未來相容性。