網頁跑馬燈語法教學 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 標籤製作圖片跑馬燈。

相關延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012