基于CSS和JavaScript的網頁滾動字幕

張紅琴， 陳煥英

（河南質量工程職業學院現代教育技術研究中心，河南平頂山 467000）

0 引 言

隨著互聯網的快速發展，網絡成為信息傳播的主要渠道。文字是網頁必不可少的元素，而滾動字幕一直都廣泛應用在網頁上，可以使網頁中的文字變得更生動活潑，在瀏覽時它特別醒目，經常用它來發布一些站點的通知或提示信息。滾動字幕的使用使得整個網頁更有動感，顯得很有生氣，而且還會使網頁節省出許多空間。現在的網站中也越來越多地使用滾動字幕來加強網頁的互動性。許多網站用這種形式來顯示動態新聞內容，更加吸引瀏覽者。

CSS（Cascading Style Sheets，層疊樣式表單）是用于控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言［1－2］，是由W3C提出的網頁制作標準，現已獲得絕大多數瀏覽器的支持，成為網頁設計必不可少的工具之一。JavaScript是一種腳本編程語言，其功能十分強大，可用于檢測網頁中的各種事件，并作出相應的反應，可以很輕松地動態改變網頁的CSS樣式以及結構，甚至頁面顯示內容。這使頁面靈活性大大增加，可以使用戶動態決定頁面的外觀和內容［3］。通常意義上認為CSS是靜態的樣式設定，而JavaScript則是動態地實現各種功能。通過JavaScript與CSS的配合，可以制作很多奇妙而實用的效果［4］。

用HTML自帶的標簽＜marquee＞可以很容易實現滾動字幕的制作，不是很復雜，可是滾動不平滑、抖動，看不清，而且每滾動一幕之后就會出現一次空白，不能實現首尾連接。滾動字幕也可以用flash來實現。文中主要是用CSS，HTML和JavaScript來設計和實現水平方向向左的滾動字幕，它可以使滾動字幕平滑、首尾相連。每滾動一幕之后，不會出現一次空白。

1 基本理論

1.1 HTML與CSS

HTML（Hyper Text Markup Language，超文本標記語言）和CSS是制作網頁的兩個核心技術。HTML提供網頁的結構，CSS提供網頁的布局［5］。CSS樣式表指的是一些規則，這些規則將樣式化屬性和值與文檔中的結構化元素聯系到一起，從而表達如何呈現文檔［6］。網頁包含內容和表現形式這兩個因素。內容是指網頁實際要傳遞的信息，包括文本、圖片等。表現形式是指內容呈現的樣式，例如字體、文本顏色、布局等，所有用于改變內容外觀的部分，都稱之為“表現形式”。通過使用CSS，可以將一個HTML文件的內容與有關它的表現形式或風格的信息分離開來［7］。

使用CSS還有如下的優勢：可以使網頁的表現非常統一，并且容易修改；可以支持多種設備；可以減少網頁的代碼量，加快下載顯示的速度；作者和讀者可以自己決定文件的顯示；文件的結構更加靈活［8－10］。

HTML與CSS是兩個作用不同的語言，它們同時對一個網頁產生作用，因此，必須通過一些方法將CSS與HTML掛接在一起，這樣才能正常工作［11］。

引入CSS可以采用以下3種方式：

1）外部樣式表：分導入式和鏈接式，目的都是將一個獨立的CSS文件引入HTML文件。假如將一個文件c1．css引入到HTML文件中，可以有以下方式：

鏈接式：

＜link href＝"c1．css"rel＝"stylesheet"type＝"text／css"／＞

導入式：

＜style type＝"text／css"＞

＠import"c1．css"；

＜／style＞

2）內部樣式表（位于＜head＞標簽內部）：將對頁面中各種元素的樣式設置集中寫在＜head＞和＜／head＞之間，對于單一的網頁，這種方式很方便。但是對一個包含很多頁面的網站，如果每個頁面都以內嵌方式設置各自的樣式，就失去了CSS帶來的巨大優點。

例如：

＜style type＝"text／css"＞

p｛color：red；｝

＜／style＞

3）內聯樣式（在HTML元素內部）：即在標記的style屬性中設定CSS屬性，這種方式本質上沒有體現出CSS優勢，因此不推薦使用。

例如：

＜p style＝"color：red；"＞內容＜／p＞

1.2 JavaScript

JavaScript是因特網上最流行的腳本語言，并且可在所有主要的瀏覽器中運行，比方說Internet Explorer，Mozilla，Firefox，Netscape和Opera。

JavaScript被設計用來向HTML頁面添加交互行為，是一種腳本語言。通常被直接嵌入HTML頁面。JavaScript是一種解釋性語言（就是說，代碼執行不進行預編譯）。在HTML文件中有3種方式［12］加載JavaScript，可以位于head部分、body部分和使用外部JavaScript，這些方式與HTML中加載CSS很相似。

通過JavaScript可以重構整個HTML文檔，可以添加、移除、改變或重排頁面上的項目。

要改變頁面的某個東西，JavaScript就需要獲得對HTML文檔中所有元素進行訪問的入口。這個入口，連同對HTML元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型（DOM）來獲得的。用JavaScript對網頁進行的所有操作都是通過DOM進行的。

1.3 DOM

DOM（Document Object Model）被稱作文檔對象模型，它是語言和平臺中立的接口，允許程序和腳本動態訪問和更新文檔的內容、結構和風格。

DOM是一種用于HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，可以改變文檔的內容和呈現方式。DOM把網頁和腳本以及其它的編程語言聯系了起來。可以通過文檔對象的屬性、方法和事件來掌控、操縱和創建動態的網頁元素，每一個網頁元素（一個HTML標簽）都對應著一個對象（object）。HTML文檔對象模型定義了訪問和處理HTML文檔的標準方法，HTML文檔中的每個成分都是一個節點。

1．3．1 DOM中的getElementById（）方法

getElementById（）是DOM Document對象中的一個重要的方法，用于查找文檔中的一個特定的元素，獲得對文檔元素對象的引用。getElementById的字面含義就是“通過ID名來獲得對DOM對象某個元素的引用”，在需要對HTML文檔的某個元素操作時，應當在HTML中給該元素設置一個id屬性，為它指定一個（在文檔中）唯一的名稱，然后就可以用getElementById（）獲得想要的元素。得到一個元素的引用后，javascript就可以用它對元素進行使用和修改。用這個方法基本上可以控制頁面所有標簽。

1．3．2 DOM中的setInterval和clearInterval方法

DOM中的setInterval方法常用來在網頁中實現動畫，也是網頁動畫的核心。setInterval方法可以根據設置的時間，重復執行一個JavaS－cript自定義函數或已存在的對象。setInterval通常指定兩個參數。第一個參數指定要執行的函數，第二個參數指定間隔時間。如果不使用clearInterval方法清除，setInterval會一直重復運行，直到你關閉瀏覽器。可以理解為：setInterval的作用就是根據指定的時間來重復執行指定的某段程序，從而完成一個動畫的效果。

如果對計時函數不加以處理，那么setInterval將會持續執行相同的代碼，一直到瀏覽器窗口關閉，或者用戶轉到了另外一個頁面為止。不過還是有辦法可以終止setInterval函數的執行。當setInterval調用執行完畢時，它將返回一個timer ID，將來便可以利用該值對計時器進行訪問，如果將該ID傳遞給clearInterval，就可以終止被調用的代碼的執行了。

1．3．2．1 setInterval（）定義和用法

setInterval（）方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。setInterval（）方法會不停地調用函數，直到clearInterval（）被調用或窗口被關閉。由setInterval（）返回的ID值可用作clearInterval（）方法的參數。

語法：setInterval（code，millisec［，"lang"］）。

參數描述：code必需，要執行的代碼串或者是要調用的函數名或者是匿名函數。millisec必須，周期性執行或調用code之間的時間間隔，以毫秒計。

返回值：一個可以傳遞給Window．clear－Interval（），從而取消對code的周期性執行的值。每次調用setInterval函數都會產生一個唯一的ID，可以通過clearInterval函數（此函數的參數接收一個setInterval返回的ID）暫停setInterval函數。

1．3．2．2 clearInterval（）定義和用法

clearInterval（）方法可取消由setInterval（）設置的timeout。

clearInterval（）方法的參數必須是由setInterval（）返回的ID值。該方法僅接收一個參數。

語法：clearInterval（id＿of＿setinterval）

參數描述：id＿of＿setinterval是由setInterval（）返回的ID值。

2 設 計

設定一個固定寬度并且隱藏超出它寬度的內容的外容器wrap，里面再放置一個內容器content用于存放滾動內容（包括復制的內容），text2為text1的復制內容，通過用JavaScript代碼不斷改變外容器wrap的向左滾動的寬度scrollLeft達到滾動的目的，當滾動至text1與text2的交界處時直接跳回初始位置，因為text1與text2一樣，所以分不出跳動的瞬間，滾動到了一個和當前畫面一樣的位置，結果我們看到的就是連續的滾動了，從而達到“無縫”滾動的目的。

3 實 現

3.1 所用軟件

可以用Dreamweaver或Visual Studio進行編輯，也可以用記事本等工具編寫。在Dreamweaver中，無論是CSS代碼還是HTML代碼，都有很好的語法提示。在編寫具體CSS代碼時，按空格鍵或者回車鍵都可以觸發語法提示，按空格鍵直接顯示語法提示，按回車鍵時換行并且顯示語法提示。語法提示可以顯示出屬性，進行選擇，當光標定位到某個屬性上后，按回車鍵，可以選擇該屬性，并且同時顯示出供選擇的屬性值，再從中進行選擇。但是用Dreamweaver編寫JavaScript代碼時，并不會有語法提示、自動完成功能等方便快捷之處，只有語法高亮。用Visual Studio編寫CSS時也有很好的語法提示，和用Dreamweaver有所不同，當用到的開始標簽輸入結束后，會自動加上結束標簽。另外編寫JavaS－cript時，會有很好的語法提示。

3.2 代碼部分

用HTML設置頁面元素，確定頁面中的內容；用CSS設置元素的CSS屬性，對其進行定位并設置其是否可見；再用JavaScript編寫函數，實現當鼠標移到字幕上時，停止，移出時，繼續。

程序中所用的完整代碼和部分注釋如下：

3.3 運行結果

把上述代碼也可以包括其中的注釋部分全部復制到一個網頁文件中，打開網頁就可以看到如圖1所示的向左滾動字幕，并且平滑、首尾相連。當鼠標指針移至滾動字幕上時，就停止滾動。當鼠標指針移出滾動字幕時，又繼續開始滾動。

圖1 滾動字幕

3.4 分析討論

上述代碼由3部分組成：HTML，CSS和JavaScript。

HTML和CSS部分用于確定網頁中的內容和外觀。wrap為外部容器，content為內部容器，text1和text2的內容和樣式完全相同。text1為滾動文字內容，text2為滾動文字內容的復制內容，其中content的寬度定義非常重要，必須符合下面兩個條件：

1）content的寬度－text1的寬度≥wrap的寬度。也就是內部容器content的寬度不僅要大于外部容器wrap的寬度，而且還要大于或等于wrap和text1的寬度的總和。這個可以理解為如果內部容器內容沒有超過外部容器的寬度，不需要橫向的滾動就可以看到所有橫向的范圍，那么在JavaScript中使用scrollLeft的時候肯定是無效的了，這時文字內容是一點也不會滾動。另外，如果內部容器超過外容器的寬度，但是寬度不夠寬，那么在滾動的過程中只是滾動一會兒就停下了，也就是當滾動到內部容器的右邊界（包括border邊框）和外部容器的最右邊界（不包括border邊框）重合時，就停止不再滾動了。所以要保證滾動字幕一直滾動，內部容器寬度至少是外部容器和滾動內容的寬度總和。另外，還要符合下面的要求。

2）content的寬度至少是text1寬度的兩倍，否則text2和text1的內容不能在同一行上，也不能實現最終的效果。

另外，text1的寬度一般要大于wrap的寬度，此時只用復制一次text1的內容到text2中即可。文中的3．2代碼設計中就只復制了一次，因為text1文本內容的寬度是大于外容器wrap的寬度。但是，如果text1的寬度小于wrap的寬度，為了滾動能夠“連續”，需要將字幕的內容復制多遍，否則會出現滾動時首尾不連接的現象，原因是text2是連接text1，但text2右邊有空白區域（因為content的寬度要符合上述的兩個條件，而若text1的寬度小于wrap的寬度時，text1和text2的總寬度就一定會小于content的寬度，所以右邊就會出現空白區域）。至于字幕的內容需要復制多少遍，應根據具體字幕內容的多少來確定。

只用CSS和HTML代碼，這時看到的是靜止的內容，文字并不會滾動。如果要想使文字有動態的效果，能夠滾動，可以使用javascript來實現。

javascript代碼部分主要用來實現滾動字幕的滾動和暫停。嵌入到HTML中的javascript代碼需要以＜script type＝“text／javascript”＞開始，以＜／script＞結束。代碼中用到的方法、屬性和事件介紹如下：

getElementById（）方法、setInterval（）方法和clearInterval（）方法在前面已介紹。

innerHTML屬性：設置或獲取位于對象起始和結束標簽內的HTML。

scrollLeft屬性：對象的滾動寬度。

offsetWidth屬性：表示對象實際寬度。

onmouseover事件：鼠標指針移動到指定的對象上時事件發生，執行相應的代碼或函數。用來設置鼠標移入區域時繼續滾動。

onmouseout事件：鼠標指針移出指定的對象時發生。用來設置鼠標移出區域時繼續滾動。

代碼中用到的setInterval和clearInterval方法是window對象的方法，但由于window對象位于瀏覽器對象模型層次結構的頂端，所以在引用window對象的屬性或者方法時并不需要使用window對象名。因此，也可以將window．setInterval（）和window．clearInterval（）簡寫為setInterval（）和clearInterval（）。

在代碼中兩次用到d＝window．setInterval（roll，speed），如下所示：

第一次是單獨使用，如果沒有這一句，當打開網頁時，字幕不會滾動。另一次是在onmouseout事件觸發的函數內部使用，如果沒有這一句，當鼠標指針從字幕上移出時，字幕就不再滾動；這兩次缺一不可。

javascript代碼中的自定義函數roll是核心，如下所示：

function roll（）

上面的w．scrollLeft＋＝1語句中，w代表id為wrap的元素，w．scrollLeft表示元素wrap內的內容向左滾動的距離，w．scrollLeft＋＝1表示wrap內的內容向左滾動的距離在原來的基礎上再加1像素。語句if（w．scrollLeft－t2．offset－Width＝＝0）w．scrollLeft＝0表示如果wrap內的內容向左滾動的距離等于text2（這里t2代表id為text2的元素）的寬度時，wrap向左滾動的距離又從0開始，由于text1和text2完全一樣，所以就看不出跳動的瞬間。roll函數通過語句window．setInterval（roll，speed）來調用，在一定的時間間隔調用函數roll一次，speed為時間間隔，speed值越小，滾動越快。

4 結 語

用HTML＋CSS＋JavaScript設計和實現了向左滾動的字幕，可以實現平滑、連續、無縫的效果，每滾動一幕之后，不會出現一次空白。當鼠標移至滾動字幕上時停止滾動；當鼠標移出字幕時，繼續滾動，可廣泛用在網頁設計中。文中滾動的內容沒有加超鏈接，需要時可以加上標簽＜a＞來實現。另外要注意，當滾動內容寬度大于顯示容器的寬度時，只用復制一次滾動內容即可，但是當滾動內容寬度小于顯示容器的寬度時，需要復制多次滾動內容。同理也可實現向右滾動的字幕。向下或向上的垂直方向的滾動字幕實現原理與其相似，實際上比水平方向的滾動字幕要簡單一些。另外，滾動圖片的實現原理和其相似。

［1］ 鄭俊生，姜敏．使用DIV＋CSS進行網頁設計應用研究［J］．電腦開發與應用，2008，21（9）：60－63．

［2］ 宣豐敏．畢業生就業信息管理系統的設計和實現［D］：［碩士學位論文］．上海：華東師范大學軟件學院，2010：7－8．

［3］ 葉青．HTML＋CSS＋JavaScript實用詳解［M］．北京：電子工業出版社，2008：234－235．

［4］ 曾順．精通CSS＋DIV網頁樣式與布局［M］．北京：人民郵電出版社，2007：314－315．

［5］ W3C．HTML ＆CSS［EB／OL］．（2012－02－03）［2012－02－12］．http：／／www．w3．org／standards／webdesign／htmlcss．

［6］ Hkon Wium Lie．Cascading Style Sheets Norway：University of Oslo［ED／OL］．（2012－02－05）［2012－02－12］．http：／／people．opera．com／howcome／2006／phd．

［7］ 張俊蘭，劉翼，鐵宏軍．基于CSS技術的網頁設計應用研究［J］．延安大學學報：自然科學版，2010，29（3）：34－39．

［8］ Wikipedia．Cascading Style Sheets［EB／OL］．（2012－02－05）［2012－02－12］．http：／／en．wikipedia．org／wiki／Css．

［9］ Andy Budd，Simon Collison，Cameron Moll．精通CSS：高級Web標準解決方案［M］．陳劍甌，譯．2版．北京：人民郵電出版社，2010：3－5．

［10］ 羅威，陳偉．基于模板和CSS技術的Web頁面定制［J］．計算機應用研究，2008，25（7）：2100－2103．

［11］ 溫謙．CSS設計徹底研究［M］．北京：人民郵電出版社，2008：7－8．

［12］ W3School．把JavaScript放置到何處［EB／OL］．（2012－02－05）［2012－02－12］．http：／／www．w3school．com．cn／js／js＿whereto．asp．