廣告贊助

在剛開始學習網頁設計的時候,網頁跑馬燈肯定是必學的基礎,透過跑馬燈的點綴,可以輕鬆的讓網頁呈現效果生動起來,而且應用也是相當的廣泛,例如最新消息的呈現方式也可以採用跑馬燈的技巧,這裡教大家透過 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 標籤製作圖片跑馬燈。

改變跑馬燈跑的方向:

<marquee 在此加入語法>輸入要跑的文字</marquee>

往上跑:direction="up"

呈現效果
-------------------------------------------------
嘎嘎的分享園地 -------------------------------------------------

往下跑:direction="down"
呈現效果
-------------------------------------------------
嘎嘎的分享園地 -------------------------------------------------
往左跑:direction="left"
呈現效果
-------------------------------------------------
嘎嘎的分享園地 -------------------------------------------------
<b>往右跑:direction="right"</b>
呈現效果
-------------------------------------------------
嘎嘎的分享園地 ------------------------------------------------- 

改變跑馬燈的速度:

<marquee scrollamount="1">輸入要跑的文字</marquee>

紅色字請自行更改。

數字越大,速度越快。
呈現效果
-------------------------------------------------
嘎嘎的分享園地 ------------------------------------------------- 
 

 


 

 

本文取自於:

創作者介紹
創作者 嘎嘎的分享園地 的頭像
嘎嘎的分享園地

嘎嘎的分享園地

嘎嘎的分享園地 發表在 痞客邦 留言(0) 人氣()