網頁跑馬燈語法製作 marquee 語法教學

網頁跑馬燈是常見的一種表示方法,你可以透過簡單的語法製作符合網頁風格的跑馬燈,同時除了文字型跑馬燈之外,還可以設計成連結式或圖片式跑馬燈。只要透過簡單的 HTML marquee 標籤就可以做到,再透過屬性參數的設定可以達到各種效果唷!

marquee 語法使用方法很簡單,由 marquee 開頭,要跑的文字或圖片放中間,再由 marquee 結尾即可



透過屬性參數設定跑馬燈的跑法,將跑馬燈做成由上往下、由下往上、由左至右或由右至左等效果;除此之外還可以加入跑馬燈的背景顏色、行為模式、對齊方式、設定速度、高度等等項目,調整成適合網頁的風格。

跑馬燈屬性參數
  • 方向設定:direction="參數值";參數值有 up(向上)、dun(向下)、left(向左)、right(向右)。
  • 對齊設定:align="參數值";參數值有 top(向上對齊)、midden(垂直至中)、botton(項下對齊)。
  • 速度設定:scrollamount="參數值" ;參數值為數字,通常設定 1~10 的範圍,數字越大跑得越快。
  • 長度設定:height="參數值";參數為數字,自行設定。
  • 寬度設定:width="參數值";參數為數字,自行設定。
  • 行為設定:behavior="參數值";參數有 alternate(來回跑)、slide(跑入後停止)。
  • 背景顏色:bgcolor="參數值";參數可設定為顏色的色碼,不設定則沒有顏色。
為跑馬燈加上文字連結與圖片



你可以搭配著參數設定,讓連結或圖片也可以照著設定動作。

滑鼠移入後自動停止的方法

這是非常普遍的用法,尤其是當你的跑馬燈有超連結或圖片連結,可以讓網友點選的時候,一定要讓網友的滑鼠移入後自動停止才對,像是促銷優惠或廣告 banner 等都是常見的手法語法如下。



這個語法比較特別,用到了類似 Javascript 的語法,onMouseOver 的意思是滑鼠滑過的時候,onMouseOut 的意思是當滑鼠移走的時候,所以整句的語法就是當滑鼠移入,跑馬燈就停止,當滑鼠移走的時候,則繼續跑。

基本的語法學會後,還可以做到更多的變化唷!例如透過兩個 marquee 標籤包在一起,做出上下左右飄動的跑馬燈特效。或是透過多個跑馬燈跑不同的方向,再設定字體顏色與大小,就可以看到很多個跳動的文字囉!有趣的特效很多,自由發揮吧!

延伸閱讀:網頁跑馬燈語法教學 HTML marquee 程式設計
© Copyright webtech.tw Since 2010