用最簡單的方法制作電子公告牌

2024-09-12 15:14:48

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

現(xiàn)在很多網(wǎng)站采用電子公告牌（滾動字幕）的方式顯示各種文字信息，其制作方式多種多樣，常用的方法主要有：

你好，下面是一段演示效果，請將鼠標(biāo)指向滾動信息然后移開,再試試鏈接效果。

這是一幅動畫

這是有鏈接的第一段文字

這是有鏈接的第二段文字

這是有鏈接的第一個列表項目
這是有鏈接的第二個列表項目
這是無鏈接的第三個列表項目

　?。?、直接采用的滾動字幕工具制作公告牌。優(yōu)點：最容易實現(xiàn)，不需多少專業(yè)知識。缺點：樣式單一，效果很一般；

　?。?、通過編寫腳本（如javascript等）來實現(xiàn)公告牌。優(yōu)點：功能較強(qiáng)、效果較好、可靈活控制。缺點：編程較復(fù)雜，要求具有較高的專業(yè)知識。

　?。?、利用制作flash動畫來模擬電子公告牌。優(yōu)點：樣式豐富多彩，效果較好。缺點：生成的動畫文件相對較大，且需要熟悉flash軟件。本人在制作本單位網(wǎng)站時也多次使用過電子公告牌。最近本人采用了一種可以說是最簡便的方法實現(xiàn)了效果非常專業(yè)的公告牌，相信一定是很多網(wǎng)友夢寐以求的效果，現(xiàn)介紹給大家共同分享。

　　本公告牌制作原理：通過利用非常簡單的javascript代碼擴(kuò)充frongpage中的滾動字幕功能而制作極棒的公告牌。

　　本公告牌的優(yōu)點：１、制作簡便；２、功能強(qiáng)大：滾動信息可以是一個超文本文件，即除了文字外，還可包含圖片、動畫等，且可靈活調(diào)整各元素的布局及建立多個超鏈接；３、信息滾動方向可以是自上而下、自下而上、從左到右、從右到左，且當(dāng)鼠標(biāo)指向滾動信息時，會自動停下來，鼠標(biāo)離開便繼續(xù)滾動。

　　制作步驟：

１、用文本編輯器建立一個文本文件（如scrolltext.js），其內(nèi)容如下：

document.write("〈marquee behavior=scroll direction=up width=240 height=140 scrollamount=1 scrolldelay=1 onmouseover='this.stop()' onmouseout='this.start()'〉");

document.write('〈p〉你好，下面是一段演示效果，請將鼠標(biāo)指向滾動信息然后移開。再試試鏈接效果?！?a〉〈/p〉');

document.write('〈img border="0" src="/files/beyondpic/oldjcwimg/2005-11/15/051115120816340.gif" width="32" height="32"〉這是一幅動畫');

document.write('〈p〉〈a href="ex.htm"〉這是有鏈接的第一段文字〈/a〉〈/p〉');

document.write('〈p〉〈a href="ex.htm"〉這是有鏈接的第二段文字〈/a〉〈/p〉');

document.write('〈ul style="line-height: 200%; margin-left: 20"〉');

document.write('〈li〉〈a href="ex.htm"〉這是有鏈接的第一個列表項目〈/a〉');

document.write('〈li〉〈a href="ex.htm"〉這是有鏈接的第二個列表項目〈/a〉');

document.write('〈li〉這是無鏈接的第三個列表項目〈/a〉〈/li〉〈/ul〉');

document.write('〈p〉你可以在本文件中用document.write語句輸出更多復(fù)雜的html代碼來實現(xiàn)你想要的一切。為簡單起見，上面的鏈接都指向了同一文件（ex.htm）。再見！〈/p〉');

document.write("〈/marquee〉");

　　代碼說明：第一條語句和最后一條語句是定義滾動字幕對象的，中間那些語句行輸出字幕內(nèi)容。其中第一語句中direction=up表示字幕自下而上滾動，若將up改為left，right，down則可分別實現(xiàn)幾個方向的滾動。onmouseover='this.stop()' 和onmouseout='this.start()'則分別表示鼠標(biāo)指向滾動字幕時停止?jié)L動和移開后繼續(xù)滾動。

　　２、為演示方便，在scrolltext.js所在目錄隨便建一個網(wǎng)頁ex.htm。

　　３、在scrolltext.js所在目錄建立一新網(wǎng)頁，將如下代碼加入〈body〉區(qū)域，然后便可瀏覽效果。
〈script language="javascript" src="scrolltext.js"〉〈/script〉

　　代碼說明：上面網(wǎng)頁僅是最簡單的布局，在實際應(yīng)用中，你可將步驟２中的代碼放于任何一個合適的位置，可配上合適的背景。如果你再用一個絕對定位的標(biāo)志將代碼括起來，你便可將滾動字幕浮動于網(wǎng)頁的任何一個位置，靈活運(yùn)用可產(chǎn)生極好的效果　跌對定位可參照如下具體代碼：

〈div style="left: 180; position: absolute; top: 20; width: 162; height: 115; z-index: 200"〉
〈script language="javascript" src="scroll.js"〉〈/script〉
〈/div〉

　　筆者已利用該方法制作了多個效果很好的電子公告牌，強(qiáng)力推薦有興趣的網(wǎng)友不妨一試。

上一篇：FrontPage網(wǎng)上筑巢手記——修改和添加頁面

下一篇：Frontpage2000實務(wù)高級網(wǎng)站管理