一款JS文字幻燈切換特效_文本鏈接特效

這是一款非常不錯的文字切換顯示效果，雖然現在不常見，但作為學習JS的方法、函數來說，還是很好的。它不但實現文字切換，而且還加入了過渡特效，使這段代碼增添了幾分靈氣，JS文字切換應該有很多，值得嘗試一下本代碼。

<html>
<head>
<title>文字幻燈切換特效</title>
</head>
<body onLoad="initiate()">
<script LANGUAGE="JavaScript">
<!-- Beginning of JavaScript - 
var message=new Array()
message[0]="中國四大門戶之一，163網易歡迎您！"
message[1]="國內最大綜合性站點——新浪歡迎您！"
message[2]="國內學習型源碼資料站——模板無憂歡迎您！"
var messageurl=new Array()
messageurl[0]="http://www.163.com/"
messageurl[1]="http://www.sina.com/"
messageurl[2]="/"
var messagetarget=new Array()
messagetarget[0]="_blank"
messagetarget[1]="_blank"
messagetarget[2]="_blank"
///
var linktext="GO"
var fntsize=11
var fntcolor="FFFF00"
var fntfamily="Verdana"
var fntweight=0
var pause=3
var backgroundcolor="333333"
var posleft=5
var postop=5
var scrollerwidth=200
var scrollerheight=150
var scrollerborder=2
var textpadding=15
var textwidth=scrollerwidth-(2*textpadding)
var textmrc=""
var bgmrc=""
var I_message=0
var I_stepwave=0
var I_maxstepwave=20
pause=pause*1000
if (fntweight==1) {fntweight="700"}
else {fntweight="100"}
function initiate() {
gettextmrc()
getbgmrc()
if (document.all) {
wavemessage.innerHTML=textmrc
///
wavemessagebg.innerHTML=bgmrc
wavemessagebg.style.posLeft=posleft
wavemessagebg.style.posTop=postop
wavemessage.style.posLeft=posleft+textpadding
wavemessage.style.posTop=postop+textpadding
enlargewave()
}
if (document.layers) {
document.wavemessage.left=posleft+textpadding
document.wavemessage.top=postop+textpadding
document.wavemessagebg.document.write(bgmrc)
document.wavemessagebg.document.close()
document.wavemessagebg.left=posleft
document.wavemessagebg.top=postop
changemessage()
}
}

function enlargewave() {
if (I_stepwave<=I_maxstepwave) {
wavemessage.filters.wave.phase=I_stepwave
wavemessage.filters.wave.strength=I_stepwave
wavemessage.filters.wave.lightstrength=I_stepwave
wavemessage.filters.wave.freq=I_stepwave
I_stepwave++
var timer=setTimeout("enlargewave()",50)
}
else {
clearTimeout(timer)
changemessage()
}
}

function reducewave() {
if (I_stepwave>0) {
wavemessage.filters.wave.phase=I_stepwave
wavemessage.filters.wave.strength=I_stepwave
///
wavemessage.filters.wave.lightstrength=I_stepwave
wavemessage.filters.wave.freq=I_stepwave
I_stepwave--
var timer=setTimeout("reducewave()",50)
}
else {
clearTimeout(timer)
var timer=setTimeout("enlargewave()",pause)
}
}

function changemessage() { 
I_message++
if (I_message>=message.length) {I_message=0}
gettextmrc()

if (document.all) { 
wavemessage.innerHTML=textmrc
reducewave()
}

if (document.layers) {
document.wavemessage.document.write(textmrc)
document.wavemessage.document.close()
var timer=setTimeout("changemessage()",pause)
}

}

function gettextmrc() {
textmrc="<span style='font-size:"+fntsize+"pt;font-family:"+fntfamily+";font-weight:"+fntweight+";width:"+textwidth+"px'>"
textmrc+="<font color="+fntcolor+">"+message[I_message]+"</font> "
textmrc+="<a href="+messageurl[I_message]+" target="+messagetarget[I_message]+">"
textmrc+="<br><br><font color="+fntcolor+">"+linktext+"</font></a></span>"
}

function getbgmrc() {
bgmrc="<table width="+scrollerwidth+" height="+scrollerheight+" border="+scrollerborder+"><tr><td bgcolor="+backgroundcolor+"> </td></tr></table>"
}

// - End of JavaScript - -->
</script> 
<div ID="wavemessagebg" style="position:absolute;">
</div>
<div ID="wavemessage" style="position:absolute; filter:wave()">
</div>
<div id="deletethisblock" style="position:absolute;top:5px;left:220px;">
</div> 
</body>
</html>

所屬頻道：文本鏈接特效/更新時間：2012-12-14

[收藏][報錯][返回列表]

相關文本鏈接特效：

一款JS文字幻燈切換特效_文本鏈接特效

文本鏈接特效Rss訂閱特效代碼搜索

文本鏈接特效推薦

猜你也喜歡看這些