导航条上的字慢慢出现而且有各种变幻效果,是一个精彩的效果 - 中国WEB开发者网络 (http://www.webasp.net) -- 网页特效 (http://www.webasp.net/javascript/) --- 导航条上的字慢慢出现而且有各种变幻效果,是一个精彩的效果 (http://www.webasp.net/javascript/1/482.htm) |
| -- 发布日期: 2005-06-13 |
| <!-- 网页特效代码由[中国WEB开发者网络:http://www.ChinaWebDev.com]提供! --> <!-- 要实现此效果需要 3 个步骤: --> <!-- 第 1 步: --> <!-- 把下面的代码加到<HEAD></HEAD>区域中: --> <STYLE> .stHeadliner {font-family: lucida console, courier new, monospace; font-size: 11pt; font-weight: bold; font-style: italic; background: red; color: white} </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- start hide // Delay in milliseconds for the growing headliner growWait=90 // Delay in milliseconds for the expanding headliner expandWait=120 // Delay in milliseconds for the scrolling headliner scrollWait=100 // Number of characters in scrolling zone for the scrolling headliner scrollWidth=40 // Number of lines, specify as much as you want to use lineMax=4 lines=new Array(lineMax) // Define the lines (Text to display, url, effect, time to wait) lines[1]=new Line("国内最好的综合性站点---网易", "http://www.163.net", Expand, 2000) lines[2]=new Line("国内最好的新闻发部站点", "http://www.sina.com.cn", Scroll, 1000) lines[3]=new Line("国内最好的搜索站点!", "http://www.sohu.com", Static, 2000) lines[4]=new Line("给我写信吧!", "mailto:xiaoqinglu@263.net?subject=你好&cc=webmaster@javascript2000.com", Grow, 2000) // Some other variables (just don't change) lineText="" timerID=null timerRunning=false spaces="" charNo=0 charMax=0 charMiddle=0 lineNo=0 lineWait=0 // Define line object function Line(text, url, type, wait) { this.text=text this.url=url this.Display=type this.wait=wait } // Fill a string with n chars c 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 } // end hide --> </SCRIPT> <!-- 第 2 步: --> <!-- 把<BODY>中的属性代码改为: --> <BODY bgcolor="#fef4d9" onLoad="StartHeadliner()"> <!-- 第 3 步: --> <!-- 把下面的代码加到<BODY></BODY>区域中: --> <form name="formDisplay"> <input class="stHeadLiner" type="button" name="buttonFace" value="** The Headliner +++ Jan Pijnacker **" onClick="GotoUrl(lines[lineNo].url)"></INPUT> </form> |
| webasp.net |