JavaScript——制作滚动字幕

字幕滚动事件主要时在<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>

猜你喜欢

转载自blog.csdn.net/qq_36171287/article/details/86562843