E时代

E时代男孩

5 成员46 主题9 回复0 张照片

JavaScript:实现滚动带链接的字幕

E
E 时代男孩
2001-06-07 22:05
大家都见过字幕,但字幕的形式却是活波的,变化的,今天我们使用JS实现滚动带连接的字幕,例子源码如下:

<script language=javascript>
<!--
var index = 3
link = new Array(3);
text = new Array(3);

link[0] ='http://www.cpcw.com/'
link[1] ='http://www.dscj.org/'
link[2] ...

......
text[0] ='电脑报'
text[1] ='点石成金'
text[2] ...

......


效果演示

电脑报
点石成金
天极网



document.write ("<marquee scrollamount='1' scrolldelay='50' direction= 'up' width='80' height='40'
onmouseover='this.stop()' onmouseout='this.start()'>");

for (i=0;i<index;i++){
document.write (" <a href="+link[i]+" target='_blank'>");
document.write (text[i] + "</A><br>");
}
document.write ("</marquee>")
// -->
</script>


  代码分析:

  其中“var index =” 数字可以根据您的要求随意更改数值,其值为您连接字幕的条数;link为连接的
地址,text为字幕的文字描述;scrollamount、 scrolldelay为字幕的延迟时间和显示数量,可以自己调节
比例;direction为滚动方式,可以自己改为上下左右;width、height为字幕区域的宽高度target='_blank',为连接地址在新窗口中打开;“onmouseover=”“onmouseout=”为鼠标事件,当鼠标接近时停止滚动,如果您不 喜欢这样可以把它删掉,字幕就会一直滚动了。

  补充说明:

  如果你的页面使用js这种程序多了,加上HTML标记代码,你的源文件看上去就会十分庞大,使HTML文档可读性不强。我们可以从html代码中把<!-->和// -->之间的代码分离出来,存成一个.js文件就易于管理了,在更新连接时直接更新.js即可,而且代码看上去也规整多了。例如请将上面这段代码copy到你的记事本里,然后选择文件->另存为,在输入框中键入"zimu.js"(注意:引号千万不能少,以便保证你存储的文件的括展名是.js),然后在你页面的<head>和</head>之间加入<script language="javascript" src="路径/zimu.js"></script>,就可以调用这个js文件了!

  
我们一直在努力!
欢迎加入e时代俱乐部:
eboy.coolcity.com.cn
欢迎访问E时代男孩主页
eboymcy.myrice.com

_________您的支持是我进步的唯一源泉!
^_^E时代男孩^_^
1 / 1

登录后回复。