怎么制做具有鼠标悬停效果滚动公告栏

解决思路
        通过设置marquee元素属性和事件就能完全实现这些功能。
具体步骤
     代码示例:

<marquee scrollAmount="2" scrollDelay="60"  
onmouseover="this.stop()" onmouseout="this.start()"  
direction="up" style="width:150px;height:100px;
background:#eeeeee">
<a href="http://www.flash8.net">闪客之吧</a><br>
<a href="http://www.flash8.net">闪客之吧</a><br>
<a href="http://www.flash8.net">闪客之吧</a><br>
<a href="http://www.flash8.net">闪客之吧</a><br>
<a href="http://www.flash8.net">闪客之吧</a><br>
<a href="http://www.flash8.net">闪客之吧</a><br>
<a href="http://www.flash8.net">闪客之吧</a><br>
</marquee>

特别提示
直接运行本例代码,将看到在一个灰色的块区域内,文字从下向上滚动,鼠标移上时滚动停止,并且文字停留在当前位置,而鼠标移开后滚动继续,效果如图1.8.18所示。

图1.8.18 具有鼠标悬停效果的滚动公告栏

特别说明

本例主要是marquee对象的一些方法和属性的应用:
behavior 设置或获取文本如何在字幕中滚动。
direction设置或获取文本滚动的方向。
loop 设置或获取字幕播放的次数。
scrollAmount 设置或获取介于每个字幕绘制序列之间的文本滚动像素数。
scrollDelay 设置或获取字幕滚动的速度。  
start 开始滚动字幕。  
stop 停止字幕的滚动。

版权声明:
作者:xiaoniba
链接:https://blog.xiaoniba.com/2007/10/04/%e6%80%8e%e4%b9%88%e5%88%b6%e5%81%9a%e5%85%b7%e6%9c%89%e9%bc%a0%e6%a0%87%e6%82%ac%e5%81%9c%e6%95%88%e6%9e%9c%e6%bb%9a%e5%8a%a8%e5%85%ac%e5%91%8a%e6%a0%8f/
来源:小泥吧的博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>