|
|
| 实用Script详解：一触即停的滚动信息栏 |
作者：未知
文章来源：www.jspcn.net
访问次数：419次
加入时间：2005年01月19日
|
|
本文出自: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">
<!--
// 定义滚动消息的内容
// 内容可以是普通文本，也可以包含超级链接内容
// 只要是符合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>
|
|
|
