实用SCRIPT详解:一触即停的滚动信息栏
类别: JavaScript教程
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>
<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>
- 上一篇: 怎样锁右键,和解开右键
- 下一篇: 禁止右键、CTRL键和复制功能的JS代码
-= 资 源 教 程 =-
文 章 搜 索