当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript:实现滚动带链接的字幕

Javascript
表格 隔行换色升级版
JavaScript 变量基础知识
fileupload控件 文件类型客户端验证实现代码
extjs DataReader、JsonReader、XmlReader的构造方法
让Firefox支持event对象实现代码
CSS+Js遮罩效果的TAB及焦点图片切换(推荐)
javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例
JQuery 图片延迟加载并等比缩放插件
Jquery作者John Resig自己封装的javascript 常用函数
js 鼠标拖动对象 可让任何div实现拖动效果
页面中js执行顺序
Javascript select下拉框操作常用方法
jQuery 常见学习网站与参考书
javascript currying返回函数的函数
prototype 中文参数乱码解决方案
为javascript添加String.Format方法
asp.net HttpHandler实现图片防盗链
Riot.js 快速的JavaScript单元测试框架
Javascript实现的CSS代码高亮显示
Js 实现表格隔行换色一例

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 338 ::
收藏到网摘: n/a

  大家都见过字幕,但字幕的形式却是活波的,变化的,今天我们使用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文件了!

  好了,我们今天的滚动字幕就完成了,怎么样,自己快动手做做看吧,有问题来我的主页(http://www.dscj.org)留言给我,我会及时给大家回复的!