当前页面: 开发资料首页 → Javascript 专题 → JavaScript小技巧制作的跑马灯效果

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

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

<textarea readonly style="border:none;font-family:Courier New;line-height:150%;width:760px;overflow-y:visible">

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

　＜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()函数，使得跑马灯中的文字往前进一格。 在函数的一开始，有一些较罗嗦的计算部分，但这并不难使我们了解，这些计算主要是用来取得跑马灯中的文字应该由那一个位置开始显示的用途。一开始当然是必需加一些空白在字的左边，让文字部分能尽可能靠右，然后再一字字的将空白减少，结果自然就造成字往前移动的效果了。