html跑馬燈效果


實現跑馬燈的方法很多,其中最簡單的是采用一句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來實現跑馬燈。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM