精彩JS实例：带连接的擦除式字幕 |
|
我们看多了网上单调的滚动字幕是否感觉枯燥无味呢？！那今天我们自己动手用JS来设计个漂亮点的字幕──带连接的擦除式字幕(见下面的演示效果)，而且所有字幕信息在一行上按先后顺序显示出来，我们来学习一下吧！
首先编辑以下调用代码，把它加到＜head＞＜/head＞之间即可。 ＜SCRIPT＞ ＜!-- function correct(){ if (finished){ setTimeout("begin()",0) } return true } window.onerror=correct function begin(){ if (!document.all) return if (maxheight==null) maxheight=temp.offsetHeight whatsnew.style.height=maxheight temp.style.display="none" c=1 finished=true change() } //--＞ ＜/SCRIPT＞ -------------------------------------------------------------------------------- 然后大家动手编辑以下JS代码，把它加入到＜body＞＜/body＞之间需调出的位置，其中加重色的代码为可更改的内容！ ＜SCRIPT language=javascript＞ ＜!-- var top=0 var maxheight var tickers=new Array() tickers[0]='＜a href="*.htm" target="_blank"＞＜font color="ffffff"＞例子1：我看看效果如何？＜/font>＜/a＞' tickers[1]='＜a href="*.htm" target="_blank"＞＜font color="000000"＞例子2：我看看效果如何？＜/font>＜/a＞' tickers[2]='＜a href="*.htm" target="_blank"＞＜font color="ff00ff"＞例子3：我看看效果如何？＜/font>＜/a＞' tickers[3]... ...... for (i=1;i＜=tickers.length-1;i++){ if (tickers[i].length>=tickers[top].length) top=i } if (document.all) document.write('＜span id="whatsnew" style="width:100%;height=10;filter:revealTrans(duration=2,transition=19)"＞'+tickers[0]+'＜/span＞') function change(){ whatsnew.innerHTML='' whatsnew.filters.revealTrans.apply() whatsnew.filters.revealTrans.play() whatsnew.innerHTML=tickers[c] if (c==tickers.length-1) c=0 else c+=1 setTimeout("change()",3000) } if (document.all) document.write('＜span id=ns style="display:none;"＞') // --> ＜/SCRIPT＞ ＜div id=temp style="width: 600; height: 10"＞＜/div＞ 此段代码简要说明： 先看“top=”,此项为控制显示字幕的上边距； href=""项为指定调用的WEB文件及地址，可以使用相对和绝对路径； color=""项中可以控制显示字幕的文字色彩，支持十六进制的颜色标识；target="_blank"项的作用为在新窗口中打开连接文件，您可以根据需要决定是否使用新窗口；width="" height=""是控制字幕显示的宽度和高度；(duration= ,transition= )为控制单行字幕的字符间的延迟时间和显示方式，选不同的值你会得到意想不到的酷效果，阿伦曾选出过若隐若现的效果值；("change()",3000)其中的数字为控制前后两条信息显示的间隔时间。tickers[0]为信息的条目数量，每条语法规则相同，您可以根据需要自己增减！ 最后把原来的＜body＞改为＜body onload=begin()＞即可，让网页自动加载以上信息条。 另外，如果你嫌代码放在一个页面令WEB体积太胖了，阿伦告诉大家个好方法，您可以把第二部分的JS代码用写字板等工具另存为*.js的文件作为一个插件，然后在你的页面需要调用的位置加入 ＜SCRIPT language=javascript src="*.js"＞＜/SCRIPT＞ 这样您想更新字幕内容时只需单独更新*.js的内容就可以了。 OK，到此为止我们大公告成！赶快试试擦除式字幕的酷效果吧！大家也可以来http://www.dscj.org/查看效果，有不懂的地方写信给阿伦好了！ 下次我们接着学习用JS实现复杂的连接滚动字幕 …… |