带链接的擦除式字幕

带链接的擦除式字幕

我们看多了网上单调的滚动字幕是否感觉枯燥无味呢？！那今天我们自己动手用JS来设计个漂亮点的字幕──带连接的擦除式字幕(见图1的演示效果)，而且所有字幕信息在一行上按先后顺序显示出来我们来学习一下吧！

图1

效果演示:
首先编辑以下调用代码，把它加到＜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。
大家动手编辑以下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= )为控制单行字幕的字符间的延迟时间和显示方式，选不同的值你会得到意想不到的酷效果，“（"chang()"3000)”其中的数字为控制前后两条信息显示的间隔时间。“tickers[0]”为信息的条目数量，每条语法规则相同，您可以根据需要自己增减！
最后把原来的＜body＞改为＜body onload=begin()＞即可，让网页自动加载以上信息条。
另外，如果你嫌代码放在一个页面令Web体积太胖了， 这里告诉大家个好方法，您可以把第二部分的JS代码用写字板等工具另存为*.js的文件作为一个插件，然后在你的页面需要调用的位置加入：
＜SCRIPT language=javascript src="*.js"＞＜/SCRIPT＞
这样你想更新字幕内容时只需单独更新*.js的内容就可以了。

（阿伦）