張紅琴， 陳煥英

（河南質(zhì)量工程職業(yè)學院現(xiàn)代教育技術研究中心，河南平頂山 467000）

0 引 言

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

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

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

1 基本理論

1.1 HTML與CSS

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

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

HTML與CSS是兩個作用不同的語言，它們同時對一個網(wǎng)頁產(chǎn)生作用，因此，必須通過一些方法將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）內(nèi)部樣式表（位于＜head＞標簽內(nèi)部）：將對頁面中各種元素的樣式設置集中寫在＜head＞和＜／head＞之間，對于單一的網(wǎng)頁，這種方式很方便。但是對一個包含很多頁面的網(wǎng)站，如果每個頁面都以內(nèi)嵌方式設置各自的樣式，就失去了CSS帶來的巨大優(yōu)點。

例如：

＜style type＝"text／css"＞

p｛color：red；｝

＜／style＞

3）內(nèi)聯(lián)樣式（在HTML元素內(nèi)部）：即在標記的style屬性中設定CSS屬性，這種方式本質(zhì)上沒有體現(xiàn)出CSS優(yōu)勢，因此不推薦使用。

例如：

＜p style＝"color：red；"＞內(nèi)容＜／p＞

1.2 JavaScript

JavaScript是因特網(wǎng)上最流行的腳本語言，并且可在所有主要的瀏覽器中運行，比方說Internet Explorer，Mozilla，F(xiàn)irefox，Netscape和Opera。

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

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

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

1.3 DOM

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

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

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

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

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

DOM中的setInterval方法常用來在網(wǎng)頁中實現(xiàn)動畫，也是網(wǎng)頁動畫的核心。setInterval方法可以根據(jù)設置的時間，重復執(zhí)行一個JavaS－cript自定義函數(shù)或已存在的對象。setInterval通常指定兩個參數(shù)。第一個參數(shù)指定要執(zhí)行的函數(shù)，第二個參數(shù)指定間隔時間。如果不使用clearInterval方法清除，setInterval會一直重復運行，直到你關閉瀏覽器?？梢岳斫鉃椋簊etInterval的作用就是根據(jù)指定的時間來重復執(zhí)行指定的某段程序，從而完成一個動畫的效果。

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

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

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

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

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

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

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

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

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

語法：clearInterval（id＿of＿setinterval）

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

2 設 計

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

3 實 現(xiàn)

3.1 所用軟件

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

3.2 代碼部分

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

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

3.3 運行結果

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

圖1 滾動字幕

3.4 分析討論

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

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

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

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

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

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

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

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

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

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

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

onmouseover事件：鼠標指針移動到指定的對象上時事件發(fā)生，執(zhí)行相應的代碼或函數(shù)。用來設置鼠標移入?yún)^(qū)域時繼續(xù)滾動。

onmouseout事件：鼠標指針移出指定的對象時發(fā)生。用來設置鼠標移出區(qū)域時繼續(xù)滾動。

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

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

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

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

function roll（）

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

4 結 語

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

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

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

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

［4］ 曾順．精通CSS＋DIV網(wǎng)頁樣式與布局［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技術的網(wǎng)頁設計應用研究［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．a(chǎn)sp．