[ 永远的UNIX > 实用Script详解：一触即停的滚动信息栏 ]

[ 永远的UNIX::UNIX技术资料的宝库 ]

首页 > 编程技术 > 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>

<!--

// 定义滚动消息的内容

// 内容可以是普通文本，也可以包含超级链接内容

// 只要是符合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>

// 使用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>

<h3>一触即停的滚动消息栏</h3>

</center><p>

(http://www.fanqiang.com) 进入【UNIX论坛】

相关文章

★ 樊强制作欢迎分享 ★