·您的位置: 首页 » 资源教程 » 编程开发 » JavaScript » 实用SCRIPT详解:一触即停的滚动信息栏

实用SCRIPT详解:一触即停的滚动信息栏

类别: JavaScript教程  评论数:0 总得分:0
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=&acute;&acute;
msg=msg+&acute;<div align="center" style="color:white;size:19px">文本消息滚动栏<br><br></DIV>&acute;
msg=msg+&acute;<div align="center" style="color:white;size:19px">当鼠标指向消息栏时,滚动停止</DIV>&acute;
msg=msg+&acute;<div align="center" style="color:white;size:19px">当鼠标离开消息栏时,继续滚动<br><br></div></font>&acute;
msg=msg+&acute;<div align="center"><a href="http://www.sina.com.cn/" style="size:19px;color:white">新浪网</a></div>&acute;

-->
</script>

</HEAD>

<BODY>

<script language="JavaScript">

// 使用marquee固有属性与css扩展属性定义滚动消息区
document.writeln(&acute;<marquee id="ieslider" scrollAmount=2 direction=up style="position:absolute; top:100px; left:220px; width:300; height:100;background-color:black;">&acute;)
document.writeln(msg)
document.write(&acute;</marquee>&acute;)

// 修改滚动消息区的鼠标经过与离开事件处理代码
// 使用行间定义函数,简化代码尺寸
ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
ieslider.onmouseout=new Function("ieslider.scrollAmount=2")
</script>

<p><center>
<h3>一触即停的滚动消息栏</h3>
</center><p>
-= 资 源 教 程 =-
文 章 搜 索
关键词:
类型:
范围:
纯粹空间 softpure.com
Copyright © 2006-2008 暖阳制作 版权所有
QQ: 15242663 (拒绝闲聊)  Email: faisun@sina.com
 纯粹空间 - 韩国酷站|酷站欣赏|教程大全|资源下载|免费博客|美女壁纸|设计素材|技术论坛   Valid XHTML 1.0 Transitional
百度搜索 谷歌搜索 Alexa搜索 | 粤ICP备19116064号-1