文字在按钮上交替慢慢出现

2024-09-05 12:21:37

字体：大中小

来源：转载

供稿：网友

不知这是一个按钮特效还是文字特效，分类到文字特效吧，只不过跑到了按钮上的文字特效，几条文字交替显示在按钮内，慢慢不断出现，每一组字符都被写入在JS的数组中，JavaScript控制了字符的输出，有兴趣的看看代码。

<HTML><HEAD><TITLE>文字交替慢慢出现</TITLE><SCRIPT language=JavaScript>growWait=90expandWait=120scrollWait=100scrollWidth=40lineMax=4lines=new Array(lineMax)lines[1]=new Line("开源源代码站点---武林网", "/", Expand, 2000)lines[2]=new Line("综合IT技术站点--VeVb", "http://www.vevb.com", Scroll, 1000)lines[3]=new Line("经典技术社区!", "http://bbs.vevb.com", Static, 2500)lines[4]=new Line("发简历给我", "mailto:slsyyc@sina.com?subject=求助&cc=123@sina.com", Grow, 3000)lineText=""timerID=nulltimerRunning=falsespaces=""charNo=0charMax=0charMiddle=0lineNo=0lineWait=0function Line(text, url, type, wait) {        this.text=text        this.url=url        this.Display=type        this.wait=wait}function StringFill(c, n) {        s=""        while (--n >= 0) {                s+=c        }        return s}function Static() {        document.formDisplay.buttonFace.value=this.text        timerID=setTimeout("ShowNextLine()", this.wait)}function Grow() {        lineText=this.text        lineWait=this.wait        charMax=lineText.length        TextGrow()}function TextGrow() {        if (charNo <= charMax) {                document.formDisplay.buttonFace.value=lineText.substring(0, charNo)                charNo++                timerID=setTimeout("TextGrow()", growWait)        }        else {                charNo=0                timerID=setTimeout("ShowNextLine()", lineWait)        }}function Expand() {        lineText=this.text        charMax=lineText.length        charMiddle=Math.round(charMax / 2)        lineWait=this.wait        TextExpand()}function TextExpand() {        if (charNo <= charMiddle) {                document.formDisplay.buttonFace.value=lineText.substring(charMiddle - charNo, charMiddle + charNo)                charNo++                timerID=setTimeout("TextExpand()", expandWait)        }        else {                charNo=0                timerID=setTimeout("ShowNextLine()", lineWait)        }}function Scroll() {        spaces=StringFill(" ", scrollWidth)        lineText=spaces+this.text        charMax=lineText.length        lineText+=spaces        lineWait=this.wait        TextScroll()}function TextScroll() {        if (charNo <= charMax) {                document.formDisplay.buttonFace.value=lineText.substring(charNo, scrollWidth+charNo)                charNo++                timerID=setTimeout("TextScroll()", scrollWait)        }        else {                charNo=0                timerID=setTimeout("ShowNextLine()", lineWait)        }}function StartHeadliner() {        StopHeadliner()        timerID=setTimeout("ShowNextLine()", 1000)        timerRunning=true}function StopHeadliner() {        if (timerRunning) {                 clearTimeout(timerID)                timerRunning=false        }}function ShowNextLine() {        (lineNo < lineMax) ? lineNo++ : lineNo=1        lines[lineNo].Display()}function GotoUrl(url){        top.location.href=url}</SCRIPT></HEAD><BODY bgColor=#fef4d9 onload=StartHeadliner()><CENTER>文字慢慢出现</span></CENTER><BR><CENTER><TABLE borderColor=#3399FF border=5 borderlight="green">  <TBODY> <TR>    <TD align=middle>      <FORM name=formDisplay><INPUT class=stHeadLiner onclick=GotoUrl(lines[lineNo].url) type=button value="** 请稍等片刻**" name=buttonFace></INPUT>   </FORM></TD></TR></TBODY></TABLE></CENTER></BODY></HTML>

上一篇：文字一直向前平移，不回头的文字特效

下一篇：网页文字动画效果，调用OBJECT实现