[ 永遠的UNIX::UNIX技術資料的寶庫 ]   GB | BIG5
首頁 > 編程技術 > Java > 正文
實用Script詳解：一觸即停的滾動信息欄
本文出自:http://www.computerworld.com.cn 作者: 甘冀平 (2002-01-29 20:43:17)
在我們單位一樓大廳中豎立了一個電子大屏幕，當各處室有重要消息通知大家時，其內容就會出現在電子大屏幕上。如果內容多一屏，信息就會由下向上循環滾動。實際上，在主頁面上應用這種技術實現類似更新日志、重要通知等等網站動態消息發布的功能，是很實用的一個做法，這不僅能在限定的范圍中播放大量內容，從而節省寶貴的頁面空間，而且循環滾動的動態效果，也會吸引訪問者的眼光，達到提醒用戶查看信息的目的。先來看看實際的效果，請點擊演示文件。
實現思路
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">
<!--
// 定義滾動消息的內容
// 內容可以是普通文本，也可以包含超級鏈接內容
// 只要是符合html語法的內容，都可以
msg=''
msg=msg+'<div align="center" style="color:white;size:19px">文本消息滾動欄<br><br></DIV>'
msg=msg+'<div align="center" style="color:white;size:19px">當鼠標指向消息欄時，滾動停止</DIV>'
msg=msg+'<div align="center" style="color:white;size:19px">當鼠標離開消息欄時，繼續滾動<br><br></div></font>'
msg=msg+'<div align="center"><a href="http://www.sina.com.cn/" style="size:19px;color:white">新浪網</a></div>'
-->
</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>
(http://www.fanqiang.com)     進入【UNIX論壇】
相關文章
 

★  樊強制作 歡迎分享  ★