onbounce事件

Marquee滚动与onbounce事件

最新推荐文章于 2024-06-29 11:18:05 发布

最新推荐文章于 2024-06-29 11:18:05 发布 · 224 阅读

文章标签：

#onbounce #事件

JavaScript 专栏收录该内容

188 篇文章

订阅专栏

本文介绍如何使用<marquee>标记配合onbounce事件实现字幕在页面上循环滚动的效果，并通过修改scrollAmount属性调整滚动速度。

1 介绍

onbounce事件是在<marquee>标记中的内容滚动到上下或左右边界时触发的事件处理程序，该事件只有在<marquee>标记的behavior属性设为aloernate时才有效。

2 应用

字幕滚动到窗口边界时速度逐渐加快（减慢）

本示例是将<marquee>标记的behavior属性设为aloernate，direction属性设置为up，使字幕可以在页面中上下循环滚动，并通过onbounce事件在字幕到达窗口边界时，修改scrollAmount属性值，改变字幕的滚动速度。

3 代码

<marquee behavior="alternate" scrollamount="1" direction="up" onbounce="pp()">
第一行滚动字幕<br> 
第二行滚动字幕<br>
第三行滚动字幕
</marquee>
<script language="javascript">
<!--
var i=1;
var t=true;
function pp()  //逐渐增加或减少字幕的滚动速度
{
 var e=window.event;
 var obj=e.srcElement;
 if (i==8)
 t=false;
 if (i==1)
 t=true;
 if (t==false)
 i=i-1;
 else
 i=i+1;
 obj.scrollAmount=i;
}
//-->
</script>

4、运行效果