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

2019-11-18 14:27:14

字體：大中小

來源：轉載

供稿：網友

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

實現思路

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

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

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

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

當然，你還可以查閱css的更多語法，從而實現你自己的非凡目的。

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

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

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

在平時的編程中，我們要善于發現這樣的技巧。

代碼詳解

<HEAD>

<SCRipT LANGUAGE="javascript">

</script>

</HEAD>

<BODY>

<script language="Javascript">

// 使用marquee固有屬性與css擴展屬性定義滾動消息區
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>´)

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

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

上一篇：實戰J2EE?開發購物網站（二）

下一篇：實現Swing的JTables和Excel間的復制和粘貼功能