字幕滚动事件主要时在<marquee>标记中使用,该标记虽然不能实现多样化的字幕滚动效果,当应用起来十分简单,可以使用最少的语句来实现字幕滚动的效果。
onbounce事件
onbounce事件是在<marquee>标记中的内容滚动到上下或左右边界时触发的事件处理程序,该事件只有在<marquee>标记的behavior属性设为alternate时才有效。
例子:字幕滚动到窗口边界时速度逐渐加快(减慢)。
将<marquee>标记的behavior属性设为altermate, direction 属性设置为up,使字幕可以在页面中上下循环滚动,并通过onbounce事件在字幕到达窗口边界时,修改scrollAmount属性值来改变字幕的滚动速度。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/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-=1;
else
i++;
obj.scrollAmount=i;
}
</script>
</head>
<body>
<marquee behavior="alternate" direction="up" scrollamount="1" onbounce="pp()">
中国物联网校企联盟将物联网定义为当下几乎所有技术与计算机、互联网技术的结合,实现物体与物体之间:环境以及状态信息实时的共享以及智能化的收集、传递、处理、执行。广义上说,当下涉及到信息技术的应用,都可以纳入物联网的范畴。
</marquee>
</body>
</html>
具体演示:略(自己动手来一遍)
onstart事件
onstart事件是在<marquee>标记中的文本开始显示时触发事件处理程序。可以通过该事件在滚动内容显示时,设置其颜色、样式、滚动方向。
例子:动态设置滚动字幕的颜色和滚动方向。
本实例是通过<marquee>标记的onstart事件,在滚动字幕显示时,动态设置滚动字幕的字体颜色和滚动方向。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var i=0;
var t=true;
var arrayobj=new Array("#00FF23","#00FFFF","#FF00000","FF00FF","0F0F0F");
function pp(){ //逐渐增加或减少字幕的滚动速度
var e=window.event;
var obj=e.srcElement;
obj.direction="up";
if(i>(arrayobj.length-1))
i=0;
obj.style.color=arrayobj[i];
i++;
}
</script>
</head>
<body>
<marquee behavior="alternate" direction="up" scrollamount="4" onbounce="pp()">
中国物联网校企联盟将物联网定义为当下几乎所有技术与计算机、互联网技术的结合,实现物体与物体之间:环境以及状态信息实时的共享以及智能化的收集、传递、处理、执行。广义上说,当下涉及到信息技术的应用,都可以纳入物联网的范畴。
</marquee>
</body>
</html>