实用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间的复制和粘贴功能