JavaScript小技巧制作的跑马灯效果

　　以下是我们所制作的跑马灯效果的源程序

　＜html>
　＜head>
　＜script language="JavaScript">
　＜!-- Hide
　var scrtxt="这儿的讯息可以改为你要告诉别人的话　 "+"
　或是注意事项 ...";
　var lentxt=scrtxt.length;
　var width=100;
　var pos=1-width;
　function scroll() {
　pos++;
　var scroller="";
　if (pos==lentxt) {
　pos=1-width;
　}
　if (pos＜0) {
　for (var i=1; i＜=Math.abs(pos); i++) {
　scroller=scroller+" ";}
　scroller=scroller+scrtxt.substring(0,width-i+1);
　}
　else {
　scroller=scroller+scrtxt.substring(pos,width+pos);
　}
　window.status = scroller;
　setTimeout("scroll()",150);
　}
　file://-->
　＜/script>
　＜body onLoad="scroll();return true;">
　Here goes your cool page!
　＜/body>
　＜/html>

　　此一程式中我们使用了和上面同样的函数（或部分）setTimeout(...)通知，计时器在时间到时去呼叫 scroll()函数，使得跑马灯中的文字往前进一格。 在函数的一开始，有一些较罗嗦的计算部分，但这并不难使我们了解，这些计算主要是用来取得跑马灯中的文字应该由那一个位置开始显示的用途。一开始当然是必需加一些空白在字的左边，让文字部分能尽可能靠右，然后再一字字的将空白减少，结果自然就造成字往前移动的效果了。

Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18