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

2024-09-12 15:14:48

字體：大中小

來源：轉載

供稿：網友

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

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

這是一幅動畫

這是有鏈接的第一段文字

這是有鏈接的第二段文字

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

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

　　２、通過編寫腳本（如javascript等）來實現公告牌。優點：功能較強、效果較好、可靈活控制。缺點：編程較復雜，要求具有較高的專業知識。

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

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

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

　　制作步驟：

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

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

document.write('〈p〉你好，下面是一段演示效果，請將鼠標指向滾動信息然后移開。再試試鏈接效果。〈/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語句輸出更多復雜的html代碼來實現你想要的一切。為簡單起見，上面的鏈接都指向了同一文件（ex.htm）。再見！〈/p〉');

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

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

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

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

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

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

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

上一篇：FrontPage網上筑巢手記——修改和添加頁面

下一篇：Frontpage2000實務高級網站管理