Javascript跑馬燈效果淺析

摘 要：本文主要介紹了Javascript中跑馬燈的實現機制，并以此為基礎詳細介紹了標題跑馬燈、狀態欄跑馬燈、文檔跑馬燈的實現過程。

關鍵詞：跑馬燈 Javascript 函數

中圖分類號：TP3 文獻標識碼：A 文章編號：1672-3791（2012）12（b）-0022-01

1 簡介

Javascript是Web頁面中的一種腳本編程語言，也是一種通用的、跨平臺的、基于對象和事件驅動并具有安全性的腳本語言。直接嵌入到HTML中，即可得到動態效果，比如，跑馬燈效果就是利用Javascript代碼實現文字或圖片的無間斷滾動。本文詳細介紹了跑馬燈的實現機制，以及各種跑馬燈效果的實現過程。

2 跑馬燈的實現機制

跑馬燈，是流傳在寧波一帶的民間表演形式。這里的跑馬燈指在電腦上通過編程實現的一種效果，通常指有時需要用一矩形條顯示少量用戶特別關心的信息，這條信息串首尾相連，向一個方向循環滾動。

Javascript跑馬燈的實現機制非常簡單，主要通過以下三步就可以完成。

（1）要獲取跑馬燈內容（文本或圖片），例如msg=“跑馬燈文字的測試！”。

（2）通過函數實現msg文字的環形連接msg=msg.substr（1，msg.length-1）+msg.substring（0，1），實現無間斷滾動。

（3）設置跑馬燈的位置。

（4）設置setInterval（“函數”，500），實現刷新，setInterval（）方法可按照指定的周期（以毫秒計）來調用函數，由此可以實現滾動效果。

綜上所述，跑馬燈的實現代碼為：

將上述代碼嵌入到標簽之間，然后在標簽中加入屬性onload=”showText（）”，即可得到Javascript跑馬燈效果。

3 文字跑馬燈實現

跑馬燈根據實現位置的不同可分為標題欄跑馬燈、狀態欄跑馬燈、文檔跑馬燈，下面就具體介紹以上三種跑馬燈效果的實現。

（1）標題欄跑馬燈。

標題欄跑馬燈，即實現頁面標題內容的無間斷滾動。具體實現代碼為：

script language="javascript">

msg=document.title；//獲取頁面標題

function showText（）{

msg=msg.substr（1，msg.length-1）+msg.substring（0，1）；

document.title=msg；//設置頁面標題

}

setInterval（"showText（）"，500）；

（2）狀態欄跑馬燈。

狀態欄跑馬燈，即在windows狀態欄上實現文字的不間斷滾動效果，實現代碼為：

（3）文檔跑馬燈。

文檔跑馬燈，即在文檔的任意位置顯示跑馬燈效果。實現這一效果，最重要的就是如何獲取實現跑馬燈的文檔位置。我們可以借助

①在文檔中定義跑馬燈區域：

②編寫跑馬燈函數，可以通過document對象的getElementById（）方法得到文檔對象，然后調用document對象的innerHTML屬性往文檔內寫入跑馬燈顯示文字。

function showText（）{

var msg="跑馬燈文字的測試！"

msg=msg.substr（1，msg.length-1）+msg.substring（0，1）；

var obD=document.getElementById（"d1"）；

obD.innerHTML=msg；

}

setInterval（"showText（）"，500）；

③加載javascript

在標簽中通過onload 屬性加載函數，例如。

4 結語

Javascript腳本語言是一種使用靈活的語言，跑馬燈效果是網頁中常用的一種顯示效果。實現機制并不復雜，在實現過程中主要有兩個問題，一是跑馬燈的位置確定；二是跑馬燈循環的實現，本文主要對以上兩個問題進行了論述。

參考文獻

[1] 曾海.JavaScript程序設計基礎教程[M].人民郵電出版社，2009.

[2] 劉睿.跑馬燈使用大全[J].網絡與信息，2010.

[3] 張惠芬.Javascript理論分析及其應用[J].衡水學院學報，2006.

[4] 周林，步豐林.嵌入式瀏覽器中Javas cript和DOM的支持[J].計算機工程，2004.