精彩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


  然后大家动手编辑以下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=10filter: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=http://www.blue1000.com/article/""项为指定调用的WEB文件及地址,可以使用相对和绝对路径; color=""项中可以控制显示字幕的文字色彩,支持十六进制的颜色标识;target="_blank"项的作用为在新窗口中打开连接文件,您可以根据需要决定是否使用新窗口;width="" height=""是控制字幕显示的宽度和高度;(duration= ,transition= )为控制单行字幕的字符间的延迟时间和显示方式,选不同的值你会得到意想不到的酷效果,阿伦曾选出过若隐若现的效果值;("change()",3000)其中的数字为控制前后两条信息显示的间隔时间。tickers[0]为信息的条目数量,每条语法规则相同,您可以根据需要自己增减!

  最后把原来的<body>改为<body onload=begin()>即可,让网页自动加载以上信息条。

  另外,如果你嫌代码放在一个页面令WEB体积太胖了,阿伦告诉大家个好方法,您可以把第二部分的JS代码用写字板等工具另存为*.js的文件作为一个插件,然后在你的页面需要调用的位置加入

  <SCRIPT language=JavaScript src="http://soft.yesky.com/SoftChannel/72351167954419712/20010419/*.js"></SCRIPT>

  这样您想更新字幕内容时只需单独更新*.js的内容就可以了。

  OK,到此为止我们大公告成!赶快试试擦除式字幕的酷效果吧!大家也可以来http://www.dscj.org/查看效果,有不懂的地方写信给阿伦好了!

  下次我们接着学习用JS实现复杂的连接滚动字幕 ……

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3