HTML - <marquee> 標籤

HTML <marquee> 標籤用於在網頁中建立自動滾動或可移動的元素。

如果我們在該標籤內放置任何內容，則預設情況下該元素會自行從右向左滑動，但我們可以透過屬性更改方向和軸。此標籤現在是已棄用的標籤，但目前仍受大多數瀏覽器支援，我們建議您使用 JavaScript 和 CSS 來建立此效果。

語法

<marquee>
  ...
</marquee>

屬性

HTML marquee 標籤支援 HTML 的全域性和事件屬性。也接受一些特定的屬性，如下所示。

屬性	值	描述
width	畫素	指定跑馬燈的寬度。這可以是 10 或 20% 等值。
height	畫素	指定跑馬燈的高度。這可以是 10 或 20% 等值。（已棄用）
direction	up down left right	指定跑馬燈滾動的方向。（已棄用）
behavior	scroll slide alternate	指定跑馬燈的滾動型別。（已棄用）
scrolldelay	值	指定每次跳躍之間的延遲時間。（已棄用）
scrollamount	值	指定跑馬燈元素的速度。（已棄用）
loop	數字	指定迴圈次數。預設值為 INFINITE，表示跑馬燈無限迴圈。（已棄用）
bgcolor	顏色名稱或顏色程式碼	以顏色名稱或顏色十六進位制值的形式指定背景顏色。（已棄用）
hspace	畫素	指定跑馬燈周圍的水平空間。（已棄用）
vspace	畫素	指定跑馬燈周圍的垂直空間。（已棄用）

方法

方法用於對任何元素執行某些特定任務。以下列出方法可以在 <marquee> 元素上使用。

方法	描述
start()	此方法用於啟動 <marquee> 元素的滾動。
stop()	此方法用於停止 <marquee> 元素的滾動。

事件處理程式

事件處理程式用於根據元素的行為觸發或啟用任務。以下列出事件處理程式可以在 <marquee> 元素上使用。

事件處理程式	描述
onbounce	當滾動到達末尾時將觸發，但僅在行為設定為 alternate 時適用。
onfinish	當滾動完成一個迴圈時將觸發，但僅在迴圈設定為真實數字時適用。
onstart	當滾動開始時將觸發。

HTML 跑馬燈標籤示例

以下示例將說明跑馬燈標籤的使用方法。何時何地以及如何使用跑馬燈標籤建立滾動元素。

實現跑馬燈元素

<!DOCTYPE html>
<html>
<head>
   <title>HTML marquee Tag</title>
</head>
<body>
   <!-- Marquee Element  Default Scrollong from right to left -->
   <marquee>
       <h2>Tutorialspoint: Simply Easy Learning</h2>
   </marquee>
</body>
</html>

實現水平滾動效果

在此示例中，我們將使用 direction 屬性實現水平滾動。我們可以建立從左到右以及從右到左的滾動。

<!DOCTYPE html>
<html>
<head>
   <title>HTML marquee Tag</title>
</head>
<body>
   <h3>From right to left Scrolling</h3>
   <marquee height="100"direction="left">Tutorialpoint</marquee>
   <h3>From left to right Scrolling</h3>
   <marquee height="100"direction="right">Tutorialpoint</marquee>
</body>
</html>

實現垂直滾動效果

在此示例中，我們將使用 direction 屬性實現垂直滾動。我們可以建立從下到上以及從上到下的滾動。

<!DOCTYPE html>
<html>
<head>
   <title>HTML marquee Tag</title>
</head>
<body>
   <h3>From down to up Scrolling</h3>
   <marquee height="100"direction="up">Tutorialpoint</marquee>
   <h3>From up to down Scrolling</h3>
   <marquee height="100"direction="down">Tutorialpoint</marquee>
</body>
</html>

在跑馬燈標籤上使用所有屬性

在此示例中，我們將單獨在跑馬燈元素上使用所有剩餘的特定屬性，以便您也可以瞭解它們的使用方法。

<!DOCTYPE html>
<html>
<head>
   <title>HTML marquee Tag</title>
</head>
<body>
   <h2>Default Marquee Element</h2>
   <marquee>
       <p>Tutorialspoint: Simply Easy Learning</p>
   </marquee>
   <h2>Setting width, Height and bgcolor on Marquee Element</h2>
   <marquee width="50%" height="25%" bgcolor="lightgray">
       <p>Tutorialspoint: Simply Easy Learning</p>
   </marquee>
   <h2>Setting Behaviour Marquee Element</h2>
   <marquee behavior="alternate">
       <p>Tutorialspoint: Simply Easy Learning</p>
   </marquee>
   <h2>Setting Speed on Marquee Element</h2>
   <marquee scrollamount="10">
       <p>Tutorialspoint: Simply Easy Learning</p>
   </marquee>
   <h2>Setting delay time on Marquee Element</h2>
   <marquee scrolldelay="600">
       <p>Tutorialspoint: Simply Easy Learning</p>
   </marquee>
</body>
</html>

支援的瀏覽器

標籤
marquee	是	是	是	是	是

html_deprecated_tags.htm

列印頁面