当前位置:开发者网络 >> 网页特效 >> 按钮特效 >> 内容
精彩推荐
分类最新特效
分类热点特效
  
导航条上的字慢慢出现而且有各种变幻效果,是一个精彩的效果
日期: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>