絕對精彩的動感3D文字切換特效

2024-09-05 12:21:28

字體：大中小

供稿：網(wǎng)友

看了你絕對會說精彩，一款運用VML+JavaScript技術(shù)聯(lián)合打造的動感3D文字切換特效，簡直和FALSH一模一樣的效果，需要變換的文字存儲在JS的數(shù)組里，如果你的內(nèi)容無限多，你只需將數(shù)組擴充下去，而主程序絲毫不用變，實用性很強。

<html><head><title>3D文字</title><xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/><style type="text/css">v/:* { behavior: url(#default#VML); }</style></head><body><div><script type="text/javascript">var message=new Array("www.Codefans.net", "DHTML CODE", "Welcome")var outlinecolor=new Array("black", "black")var fillcolor1=new Array("gray", "green", "white", "green")var fillcolor2=new Array("blue", "olive", "black", "lime")var circlemark=new Array("-")var strkweight=2var pause=2var strengthopacity="60%"var circlesize=0.5var keepinview="yes"mytruebody=(!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body var outerwidth=mytruebody.clientWidthvar outerheight=mytruebody.clientHeightvar innerwidth=Math.floor(circlesize*outerwidth)var innerheight=Math.floor(circlesize*outerheight)var posleft=(outerwidth-innerwidth)/2var postop=(outerheight-innerheight)/2var path=new Array()var i_message=0var i_outlinecolor=0var i_fillcolor1=0var i_fillcolor2=0var i_messagelength=0var longestmessage=0pause*=1000var ie=document.getElementById&&document.all?1:0 for (i=0;i<=message.length-1;i++) {	if (message[i].length>longestmessage) {		longestmessage=message[i].length	}	longestmessage+=4}for (i=0;i<=message.length-1;i++) {	var emptyspace=""	var i_emptyspace=(longestmessage-message[i].length)/2	for (ii=0;ii<=i_emptyspace;ii++) {		emptyspace+=circlemark	}	message[i]=emptyspace+" "+message[i]+" "+emptyspace}function changeform() {	if (keepinview=="yes") //DD added	document.getElementById("roofid").style.top=mytruebody.scrollTop //DD added	if (i_outlinecolor >= outlinecolor.length) {i_outlinecolor=0}	if (i_fillcolor1 >= fillcolor1.length) {i_fillcolor1=0}	if (i_fillcolor2 >= fillcolor2.length) {i_fillcolor2=0}	document.getElementById('strokeid').color=outlinecolor[i_outlinecolor]	document.getElementById('fillid').color=fillcolor1[i_fillcolor1]	document.getElementById('fillid').color2=fillcolor2[i_fillcolor2]	if (i_message < message.length) {tick()}	else {document.getElementById('textpathid').string=""	document.getElementById("roofid").style.display="none" //DD added	}}function tick() {	if (i_messagelength <= message[i_message].length) {		var messagestringend=""		var messagestring=message[i_message].substring(0, i_messagelength)+messagestringend		document.getElementById('textpathid').string=messagestring		var timer=setTimeout("tick()",50)		i_messagelength++	}	else {		clearTimeout(timer)		i_messagelength=0		i_message++		i_outlinecolor++			i_fillcolor1++			i_fillcolor2++			var timer=setTimeout("changeform()",pause)	}	}if (ie) {document.write('<div   class="70qarhlowxag"   id="roofid" style="position:absolute;left:0px;top:0px;width:'+outerwidth+'px;height:'+outerheight+'px;overflow:hidden;">')document.write('<v:oval id="tc" style="position:absolute;top:'+postop+'px;left:'+posleft+'px;width:'+innerwidth+'px;height:'+innerheight+'px">')document.write('<v:shadow on="t" opacity="'+strengthopacity+'"/>')document.write('<v:stroke id="strokeid" weight="'+strkweight+'pt" color="blue"/>')document.write('<v:fill id="fillid" on="True" color="'+fillcolor1[0]+'" color2="'+fillcolor2[0]+'" opacity="'+strengthopacity+'" opacity2="'+strengthopacity+'" type="gradient"/>')document.write('<v:path textpathok="t"/>')document.write('<v:textpath id="textpathid" on="t" id="mytp" style="font-family:/'Arial Black/'; " fitpath="t" string=""/>')document.write('</v:oval></div>')if (window.attachEvent) //DD added codewindow.attachEvent("onload", changeform)elsewindow.onload=changeform}</script></div></body></html>

上一篇：一款JS文字幻燈切換特效

下一篇：光照文字效果(點光源)