實現跑馬燈的方法很多,其中最簡單的是采用一句Html代碼來實現,我們在需要出現跑馬燈效果的地方插入“<marquee>滾動的文字</marquee>”語句,它的效果如下所示:
滾動的文字
適當的運用<marquee>標簽的參數,可以表現出不同的效果,請看下面的幾個例子:
1、左右彈來彈去的跑馬燈
彈來彈去跑馬燈!
實現的方法就是在IE的標簽上稍微多加了幾個參數產生了更加豐富的變化。設置behavior=alternate表示雙向移動,direction= left表示運動方向向左。marquee的寬度可以使用絕對象素值,例如width=200等這個值限定了跑馬燈滾動的范圍。需要說明的是該效果在 Netscape下是看不到的。
源碼粘貼框:
<marquee width=400 behavior=alternate direction=left align=middle>彈來彈去跑馬燈!</marquee>
2、跑的很快的跑馬燈
跑的很快跑馬燈!
只要在<marquee>標簽后面加上“scrollamount=15”即可,修改=后邊的數字參數即可限制文字移動的速度。
3、帶有超級鏈接的跑馬燈
實現的方法很簡單,把整個<marquee></marquee>語句包含在超鏈接中就行,你看看下面的代碼就清楚了。當然你也可以把包含在<marquee></marquee>中的各條內容分別加上不同的鏈接,這樣的跑馬燈就可用來發布滾動新聞或是做站點導航了。
如果你想給跑馬燈的文字加上顏色,換用不同的字體(默認是宋體,換體就要加代碼),只要在文字前加上<FONT face=楷體_GB2312 color=#ff0000 size=3>就行了,你可在“face=”后邊換上你喜歡的字體,在“color=”后邊換上你喜歡的字顏色,在“size=”后邊換上適合的字號,如果想讓字體加粗,就再加上<STRONG>。
請看一下效果: 帶超級鏈接的跑馬燈!點我試試? 還有一條呢!點我試試?
上面效果的代碼碼如下:
<marquee width=400 scrollamount=2> <a href=http://www.taobaojp5.tk><FONT face=楷體_GB2312 color=#ff0000 size=3><STRONG>帶有超鏈接的跑馬燈!點我試試?</a> <a href=http://954872988.qzone.qq.com/;還有一條呢!點我試試?</FONT></STRONG></a> </marquee>
以上幾個例子都是<marquee>標簽參數的應用,下面把所有可以利用的參數列在表中供你參考,不過還是要提醒你,<marquee>標簽只被IE所支持,使用Netscape瀏覽器是看不到的噢。
參數 | 用法介紹 |
behavior=scroll, slide, alternate | 跑馬方式:循環繞行,只跑一次就停住,來回往復運動 |
direction=left,right | 跑馬方向:從左向右,從右向左 |
loop=100 | 跑馬次數:循環100次,如不寫默認為一直循環 |
width=100%,height=200 | 跑馬范圍:寬為100%,高為200像素 |
scrollamount=20 | 跑馬速度:數越大越快 |
scrolldelay=500 | 跑馬延時:毫秒數,利用它可實現躍進式滾動 |
hspace=20,vspace=20 | 跑馬區域與其它區域間的空白大小 |
bgcolor=#00FFCC | 跑馬區域的背景顏色 |
face=楷體_GB2312 | 跑馬燈文字字體 |
color=#ff0000 | 跑馬燈文字顏色 |
size=3 | 跑馬燈文字字號 |
STRONG | 跑馬燈文字加粗 |
你已經看到,盡管<marquee>參數不少,但畢竟不能實現復雜的和自定義的特殊跑馬燈效果,而且還有瀏覽器限制,所以我們更多情況下會采用JavaScript來實現跑馬燈。