淡入淡出的文本效果_网页文本特效

·网页特效库 ·网页工具库

背景按钮

导航特效

< 后退 | 收藏网页特效库

推荐网页特效

推荐网页工具

您的位置：网页特效库 >> 网页文本特效 >> 淡入淡出的文本效果	查看此特效演示

淡入淡出的文本效果

把如下代码复制到<body>与</body>之间

// set your messages. Add as many as you like (you may add additional HTML-tags)
var text=new Array()
text[0]="欢迎光临网页特效库BUTONG.NET"
text[1]="这里有您需要的特效代码."
text[2]="让您的网站更精彩"

// set the corresponding links 
// If you don't want to link a message just add a "#" instead of an URL
var textlink=new Array()
textlink[0]="http://www.butong.net"
textlink[1]="http://www.butong.net/"
textlink[2]="http://www.butong.net/"

// set the corresponding targets 
// Acceptable values are "_blank", "_self", "_top" or the name of any frame
var texttarget=new Array()
texttarget[0]="_blank"
texttarget[1]="_self"
texttarget[2]="_top"

// set the font of the messages
var textfont="Arial"

// set the font-color of the messages
var textfontcolor="#FFFFFF"

// set the rollover-fontcolor of the messages
var textfontcolorrollover="#FF0000"

// set the font-size of the messages (CSS-values)
var textfontsize=9

// set the font-size for Netscape 4x (HTML-values)
var textfontsizeHTML=2

// set the font backgroundcolor of the textbox
var textbgcolor="#000000"

// set the textweight (normal or bold)
var textweight="nomal"

// set the fontstyle (normal or italic)
var textitalic="normal"

// set the width of the textbox (pixels)
var textwidth=240

// set the height of the textbox (pixels)
var textheight=60

// set the pause (seconds)
var textpause=2

// set the width of the border
var textborder=2

// set the color of the border
var textbordercolor="#FF0000"

// set the horizontal alignment of the messages (center, left, right)
var textalign="center"

// set the vertival alignment of the messages (middle, top, bottom)
var textvalign="middle"

// do not edit below this line
var textdecoration="none"
var textweightA="<b>"
var textweightB="</b>"
var textitalicA=""
var textitalicB=""
var transparency=100
var transparencystep=2

var x_pos=0
var y_pos=0
var i_text=0
var textsplit=""
var i_textsplit=0
var i_mark=0
var tickercontent
var pausefade=30
textpause*=1000

var oneloopfinished=false

var browserinfos=navigator.userAgent 
var ie=document.all&&!browserinfos.match(/Opera/)
var ns4=document.layers
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)  
var browserok=ie||ns4||ns6||opera

function changecontent() {
	getcontent()
	i_text++
	if (i_text>=text.length) {i_text=0}	
	if (ie) {
		ticker.innerHTML=content
		fadeout()
	}
	if (opera || ns6) {
		document.getElementById('ticker').innerHTML=content
		var texttimer=setTimeout("changecontent()",2*textpause)
	}
	if (ns4) {
		document.roof.document.ticker.document.write(content)
		document.roof.document.ticker.document.close()
		var texttimer=setTimeout("changecontent()",textpause)
	}	
}

function fadein() {
	if (transparency<100){
		transparency+=transparencystep
		if (ie) {
			document.all.tickerbg.filters.alpha.opacity=transparency
		}
		var fadetimer=setTimeout("fadein()",pausefade)
	}
	else {
		clearTimeout(fadetimer)
		setTimeout("changecontent()",1000)
	}
}

function fadeout() {
	if (transparency>0){
		transparency-=transparencystep
		if (ie) {
			document.all.tickerbg.filters.alpha.opacity=transparency
		}
		if (ns6) {
			document.getElementById('tickerbg').style.MozOpacity=transparency/100
		}
		var fadetimer=setTimeout("fadeout()",pausefade)
	}
	else {
		clearTimeout(fadetimer)
		setTimeout("fadein()",textpause)
	}
}

getcontent()
function getcontent() {
	if (ie || opera) {
		var tablewidth=textwidth-2*textborder
		var tableheight=textheight-2*textborder
	}
	else {
		var tablewidth=textwidth
		var tableheight=textheight
	}
	if (ie || ns6) {	
		var padding=parseInt(textborder)+3
		content="<table width="+tablewidth+" height="+tableheight+" cellpadding="+padding+" cellspacing=0 border=0><tr valign="+textvalign+"><td align="+textalign+">"
		content+="<a href=\""+textlink[i_text]+"\" target=\""+texttarget[i_text]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolor+";font-style:"+textitalic+";\" onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor+"\'\">"
		content+=text[i_text]
		content+="</a></td></tr></table>"
	}
	else {	
		content="<table width="+tablewidth+" height="+tableheight+" cellpadding="+textborder+" cellspacing=0><tr valign="+textvalign+"><td align="+textalign+">"
		content+="<a href=\""+textlink[i_text]+"\" target=\""+texttarget[i_text]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolor+";font-style:"+textitalic+";\">"
		content+=text[i_text]
		content+="</a></td></tr></table>"

framecontent="<table width="+tablewidth+" height="+tableheight+" cellpadding=0 cellspacing=0 border="+textborder+"><tr><td>"
		framecontent+="<font color=\""+textbgcolor+"\">"
		framecontent+="."
		framecontent+="</font>"
		framecontent+="</td></tr></table>"
	}
}

if (ie || ns6 || opera) {
	if (ns6) {
		textwidth-=2*textborder
		textheight-=2*textborder
	}
	document.write("<div id=\"roof\" style=\"position:relative;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;background-color:"+textbgcolor+";\">")
	
	if (!opera && !ns6 ) {
		document.write("<div id=\"tickerbg\" style=\"position:absolute;top:"+-textborder+"px;left:"+-textborder+"px;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+";border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;background-color:"+textfontcolor+";overflow:hidden\;filter:alpha(opacity=100)\">")
		document.write("</div>")
	}
	
	document.write("<div id=\"ticker\" style=\"position:absolute;top:"+-textborder+"px;left:"+-textborder+"px;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+";border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;overflow:hidden\;\">")
	document.write("</div></div>")

window.onload=changecontent
}

else if (ns4) {
	document.write("<ilayer name=\"roof\" width="+textwidth+" height="+textheight+">")
		document.write("<layer name=\"tickerframe\" width="+textwidth+" height="+textheight+" top=0 left=0 bgcolor="+textbgcolor+">")
		document.write(framecontent)
		document.write("</layer>")
		document.write("<layer name=\"ticker\" width="+textwidth+" height="+textheight+" top=0 left=0>")
		document.write()
		document.write("</layer>")
	document.write("</ilayer>")
	window.onload=changecontent
}
</script>

使用说明：text[0]至text[2]为文本的内容，textlink[0]至textlink[2]为文本的链接，texttarget[0]至texttarget[2]为链接的打开方式，这些都可以自行更改。

上一个特效：Cool！文字的光投影效果

返回列表

下一个特效：不断变色的文字