文字交替漸變的文字顯示特效

2024-09-05 12:21:38

字體：大中小

供稿：網(wǎng)友

JS實現(xiàn)的文字漸變顯示，交替淡入淡出顯示特效，把將要顯示的文字定義在Array數(shù)組中，可以定義多組文字，這些都可以交給JS來處理了，挺不錯的幻影文字導航效果。

<HTML><HEAD><TITLE>幻影文字導航</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"></HEAD><BODY bgColor=#fef4d9><span id="ewo0kko"    class="STYLE1">幻影文字導航</span><BR><CENTER><TABLE borderColor=#CCFF00 border=5 borderlight="green">  <TBODY>  <TR>    <TD align=middle><span id="kckuace"    class="STYLE2">效果顯示</span></TD>  </TR>  <TR>    <TD>      <SCRIPT language=JavaScript1.2>var qiksearch_ticker_text = new Array ("歡迎光臨VeVb", "源碼下載中心", "網(wǎng)頁特效集錦", "技術文章教程");var qiksearch_ticker_URL = new Array ("/", "http://www.56wlw.com/c/", "/texiao/", "/tech/");var qiksearch_ticker_target = new Array ("0", "0", "0", "1");var qiksearch_ticker_width = 390; // The width of the Tickervar qiksearch_ticker_height = 25; // The height of the Tickervar qiksearch_ticker_borderw=1; // Border widthvar qiksearch_ticker_borderc="#808080"; // Border Colorvar timeOutVal=200; // Delay in millisecondsvar isPause=false; // true if you want pause on mouseover, else falsevar ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1;var ns6=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1;var ns4=document.layers;var qiksearch_tickerObj;var ticker_left_ns4=(screen.width/2-20)-Math.round(qiksearch_ticker_width/2);function setTickerObj(){ if(ie4) {  qiksearch_tickerObj=document.all.qiksearch_js_ticker; } if(ns6) {  qiksearch_tickerObj=document.getElementById("qiksearch_js_ticker"); }}var isPauseContent;if(isPause){ isPauseContent=' onMouseOver="delay_timeOutVal();" onMouseOut="resume_timeOutVal();"';}else{ isPauseContent='';}if(ie4||ns6){ document.write('<table' + isPauseContent + '  onMouseUp="goURL();" width="' + qiksearch_ticker_width + '" height="' +  qiksearch_ticker_height + '" style="cursor:pointer; background:#FFFFFF; border:' + qiksearch_ticker_borderw + 'px solid ' + qiksearch_ticker_borderc + '"><tr><td align="middle">'); document.write('<div   class="os2ek0s"   id="qiksearch_js_ticker">'); document.write('</div>'); document.write('</td></tr></table>');}var def_10='A',def_11='B',def_12='C',def_13='D',def_14='E',def_15='F';var colorVal=15;var div_count=0;function qiksearch_fade_desat(getColorIntVal){ var returnVal; if(getColorIntVal>=10) {  for(var i=0; i<=15; i++)  {   if((getColorIntVal==i))   {    returnVal = eval('def_' + i);   }  } } else {  returnVal=getColorIntVal; } return(returnVal);} function writeDiv(){ if(ie4||ns6) {  qiksearch_tickerObj.innerHTML= '<font face="verdana,arial,helvetica" size="-1" color="#' +  joinColor(qiksearch_fade_desat(colorVal)) + '"><b>' + qiksearch_ticker_text[div_count] +  '</b></font>' ; } if(ns4) {  qiksearch_tickerObj=document.qiksearch_ticker_ns4;  qiksearch_tickerObj.document.write('<table border="1" bordercolor="' + qiksearch_ticker_borderc + '"width="100%"><tr><td align="center"><font face="verdana,arial,helvetica" size="-1" color="#' +  joinColor(qiksearch_fade_desat(colorVal)) + '"><b>' + qiksearch_ticker_text[div_count] +  '</b></font></td></tr></table>');  qiksearch_tickerObj.document.close(); } if((colorVal>0)  && (colorVal!=0)) {  colorVal--; } else {  colorVal=15;  if(div_count<qiksearch_ticker_text.length)  {   div_count++;  }  if(div_count==qiksearch_ticker_text.length)  {   setTimeout("resetAll()",timeOutVal);   setTimeout("writeDiv()",timeOutVal);  } } if(div_count<qiksearch_ticker_text.length) {  setTimeout("writeDiv()",timeOutVal); }}function joinColor(getColor){ return (getColor + '0' + getColor + '0' + getColor + '0');}function resetAll(){ div_count=0; colorVal=15;}function goURL(){ if(qiksearch_ticker_target[div_count]=="0") {  location.href=qiksearch_ticker_URL[div_count]; } else {  if(qiksearch_ticker_target[div_count]=="1")  {   window.open(qiksearch_ticker_URL[div_count]);  } }}var temp_timeOutVal=timeOutVal;function delay_timeOutVal(){ timeOutVal=100000000000000; setTimeout("writeDiv()",timeOutVal);}function resume_timeOutVal(){ timeOutVal=temp_timeOutVal; setTimeout("writeDiv()",timeOutVal);}setTickerObj(); window.onload=writeDiv;if(ns4){ document.write('<layer id="qiksearch_ticker_ns4" width="' + qiksearch_ticker_width + '" left="' + ticker_left_ns4 + '"></layer>');}</SCRIPT>  </TD></TR></TBODY></TABLE></CENTER></BODY></HTML>

上一篇：網(wǎng)頁文字動畫效果，調(diào)用OBJECT實現(xiàn)

下一篇：顯示輸入光標的JS打字機效果