實用Script詳解：一觸即停的滾動信息欄

2019-11-18 14:27:14

字體：大中小

供稿：網(wǎng)友

本文出自:http://www.computerworld.com.cn 作者: 甘冀平 (2002-01-29 20:43:17)
在我們單位一樓大廳中豎立了一個電子大屏幕，當(dāng)各處室有重要消息通知大家時，其內(nèi)容就會出現(xiàn)在電子大屏幕上。假如內(nèi)容多于一屏，信息就會由下向上循環(huán)滾動。實際上，在主頁面上應(yīng)用這種技術(shù)實現(xiàn)類似更新日志、重要通知等等網(wǎng)站動態(tài)消息發(fā)布的功能，是很實用的一個做法，這不僅能在限定的范圍中播放大量內(nèi)容，從而節(jié)省寶貴的頁面空間，而且循環(huán)滾動的動態(tài)效果，也會吸引訪問者的眼光，達(dá)到提醒用戶查看信息的目的。先來看看實際的效果，請點擊演示文件(http://www.fanqiang.com/a4/b5/down/demo.htm)。

實現(xiàn)思路

1、消息欄所在的區(qū)域，可以使用許多對象實現(xiàn)，比如多行文本框。但要實現(xiàn)其中內(nèi)容的滾動效果，就必須使用marquee標(biāo)記。Marquee標(biāo)記專門用于文字信息的移動，其基本語法為
<marquee> … </marquee>，屬性包括：

l 滾動方向<direction=#>：#=left、right、up、down，分別表示左右上下。
l 循環(huán)次數(shù)<loop=#>：#=次數(shù)，若未指定則循環(huán)不止。
l 滾動速度<scrollamount=#>
l 滾動延時<scrolldelay=#>
l 滾動方式<bihavior=#>：#=scroll、slide、alternate，分別表示循環(huán)、只一次、往返。

在這里，我們定義消息自下向上滾動，速度為2，滾動消息區(qū)標(biāo)識為ieslider：
<marquee id="ieslider" scrollAmount=2 direction=up

2、除了上述marquee固有屬性外，為了描述滾動消息欄的坐標(biāo)位置、長度與寬度、背景色彩等特征，我們引用CSS語句進行更加細(xì)微的控制：
style="position:absolute; top:100px; left:220px; width:300; height:100;background-color:black;"

當(dāng)然，你還可以查閱css的更多語法，從而實現(xiàn)你自己的非凡目的。

3、滾動信息的內(nèi)容就是任意符合Html語法的內(nèi)容，可以包括純文本信息，也可以包含超文本信息。這樣，用戶不僅僅能夠閱讀靜態(tài)的信息內(nèi)容，還可以通過這里跳轉(zhuǎn)到其他URL地址。

4、還有一點與傳統(tǒng)電子大屏不同的是：將鼠標(biāo)指向滾動消息區(qū)時，滾動將自動停止；鼠標(biāo)離開后，又恢復(fù)滾動。這樣的好處就是可以讓用戶仔細(xì)看清楚消息內(nèi)容。實現(xiàn)這個目的的做法就是修改滾動消息區(qū)的鼠標(biāo)經(jīng)過和離開事件ieslider.onmouSEOver和ieslider.onmouseout，當(dāng)鼠標(biāo)經(jīng)過時，設(shè)置消息滾動速度為0，即不滾動；當(dāng)鼠標(biāo)離開時，恢復(fù)默認(rèn)消息滾動速度為2。因為設(shè)置滾動速度的語句非常簡單，只要一句ieslider.scrollAmount=0（或者2），所以在這里，我們使用了行間定義函數(shù)new Function，大大地精簡了代碼尺寸：

ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
ieslider.onmouseout=new Function("ieslider.scrollAmount=2")

在平時的編程中，我們要善于發(fā)現(xiàn)這樣的技巧。

代碼詳解

<HEAD>

<SCRipT LANGUAGE="javascript">

</script>

</HEAD>

<BODY>

<script language="Javascript">

// 使用marquee固有屬性與css擴展屬性定義滾動消息區(qū)
document.writeln(´<marquee id="ieslider" scrollAmount=2 direction=up style="position:absolute; top:100px; left:220px; width:300; height:100;background-color:black;">´)
document.writeln(msg)
document.write(´</marquee>´)

// 修改滾動消息區(qū)的鼠標(biāo)經(jīng)過與離開事件處理代碼
// 使用行間定義函數(shù)，簡化代碼尺寸
ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
ieslider.onmouseout=new Function("ieslider.scrollAmount=2")
</script>

<p><center>
<h3>一觸即停的滾動消息欄</h3>
</center><p>

上一篇：實戰(zhàn)J2EE?開發(fā)購物網(wǎng)站（二）

下一篇：實現(xiàn)Swing的JTables和Excel間的復(fù)制和粘貼功能