查看完整版本: JavaScript实例教程（十四）奇异的跑马灯效果

JavaScript实例教程（十四）奇异的跑马灯效果

跑马灯效果在以往的网页设计中比较常见，各种跑马灯效果的制作方式也不一样，下面就是一种用javascript制作的跑马灯效果[wiki]源代码[/wiki]：
%26lt;scriptlanguage="javascript"%26gt;
//建一个数组，把其中的每个[wiki]元素[/wiki]都清零
functionmakearray(size)
{
this.length=size;
for(i=1;i%26lt;=size;i++)
{
this[i]=0
}
returnthis;
}
//makearray（）的作用是定义一个输入参数的数组，并把新建的数组每个元素值清零。
msg=newmakearray(3)
msg[1]="欢迎"
msg[2]="欢迎光临5D"
msg[3]="欢迎光临5D多媒体"
//定义了3条信息，也就是3个数组中的字符
interval=100;
//定义每条信息中的字符出现的间隔时间，这里是100毫秒
seq=0;
i=1;
functionScroll(){
document.tmForm.tmText.value=msg[i].substring(0,seq+1);
//输出msg[i]中从0到seq+1范围内的字符
seq++;
//msg[i]中输出字符范围加1
if(seq%26gt;=msg[i].length){seq=0;i++;interval=900};
//如果字符范围等于信息长度，间隔时间改为900mm，范围为0
if(i%26gt;3){i=1};
//如果信息元素大于了最后一条的记号，令其为1
window.setTimeout("Scroll();",interval);interval=100
};
//--%26gt;
%26lt;/script%26gt;
在%26lt;head%26gt;和%26lt;/head%26gt;标签间输入以上代码
把%26lt;body%26gt;改为%26lt;body%26gt;
且在%26lt;body%26gt;和%26lt;/body%26gt;标签之间输入以下代码：
%26lt;formname="tmForm"%26gt;
%26lt;p%26gt;%26lt;inputtype="Text"name="tmText"size="40"%26gt;%26lt;/p%26gt;
%26lt;/form%26gt;
预览网页就可以看到以下效果了：

[img]http://www.chinapsd.com/lesson/pic/mvyp-24-1-hl121501.jpg[/img]


[img]http://www.chinapsd.com/lesson/pic/mvyp-24-1-hl121502.jpg[/img]


[img]http://www.chinapsd.com/lesson/pic/mvyp-24-1-hl121503.jpg[/img]

[/td][/tr][/table]