文字交替渐变的文字显示特效

2024-09-05 12:21:38

字体：大中小

来源：转载

供稿：网友

JS实现的文字渐变显示，交替淡入淡出显示特效，把将要显示的文字定义在Array数组中，可以定义多组文字，这些都可以交给JS来处理了，挺不错的幻影文字导航效果。

<HTML><HEAD><TITLE>幻影文字导航</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"></HEAD><BODY bgColor=#fef4d9><span class="STYLE1">幻影文字导航</span><BR><CENTER><TABLE borderColor=#CCFF00 border=5 borderlight="green">  <TBODY>  <TR>    <TD align=middle><span class="STYLE2">效果显示</span></TD>  </TR>  <TR>    <TD>      <SCRIPT language=JavaScript1.2>var qiksearch_ticker_text = new Array ("欢迎光临VeVb", "源码下载中心", "网页特效集锦", "技术文章教程");var qiksearch_ticker_URL = new Array ("/", "http://www.vevb.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 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>

上一篇：网页文字动画效果，调用OBJECT实现

下一篇：显示输入光标的JS打字机效果