地图 广告
招租

←—
订阅
投稿
您的位置:网站首页 > 特效代码 > 链接文本特效 > 正文:flash水波效果的文字链接交替变色效果

flash水波效果的文字链接交替变色效果

日期:2011-12-24 16:25:00 标签:flash效果 水波效果 文字特效 链接特效 js特效

  色彩绚烂的文字链接特效,交替换色,像水波,又像风吹,打开网页后,请稍等一下,Js也需要反应一下,挺实用的文字链接效果。赞一个!   

由于代码运行框不够完善,本特效暂不提供运行预览,请见谅~~
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>flash水波效果的文字链接交替变色效果丨芯晴网页特效丨CsrCode.Cn</title>
</head>
<body>
<style type="text/css">
body { background-color:#ffcc77; font-family:"Verdana", sans-serif; font-size:20px; font-weight:bold;}
a.links{ font-family:"Verdana", sans-serif; font-size:20px; line-height:30px; color:black; text-decoration:none; font-weight:bold;}
a.links:active { color:black; }
a.links:hover { }
</style>
<script language="javascript" type="text/javascript">
<!--
function enHex(aDigit)
{
    return("0123456789ABCDEF".substring(aDigit, aDigit+1))
}
function deHex(aDigit)
{
    return("0123456789ABCDEF".indexOf(aDigit))
}

function toHex(n)
{
    return (enHex((0xf00000 & n) >> 20) +
            enHex((0x0f0000 & n) >> 16) +
            enHex((0x00f000 & n) >> 12) +
            enHex((0x000f00 & n) >>  8) +
            enHex((0x0000f0 & n) >>  4) +
            enHex((0x00000f & n) >>  0))
}
function toDecimal(hexNum)
{
    var tmp = ""+hexNum.toUpperCase()
    while (tmp.length < 6) tmp = "0"+tmp
    return ((deHex(tmp.substring(0,1)) << 20) +
            (deHex(tmp.substring(1,2)) << 16) +
            (deHex(tmp.substring(2,3)) << 12) +
            (deHex(tmp.substring(3,4)) << 8) +
            (deHex(tmp.substring(4,5)) << 4) +
            (deHex(tmp.substring(5,6))))
}
var hoverColour
var numLinks;
var rate;
var numFadeLevels;
var bgR;
var bgG;
var bgB;
var currR;
var currG;
var currB;
var count;
var fadeOut;
var continuous;
var newColour;
var tID;
var redInterval;
var greenInterval;
var blueInterval;
function initLinks(mouseOverColour, numberOfLinks, fadeOutColour)
{
 hoverColour = mouseOverColour;
 numLinks = numberOfLinks;
 rate = 1;
 numFadeLevels = 30;
 function initArray(theArray, length, val)
 {
  for(i=0;i<length;i++)
  {
   theArray[i] = val;
  }
 }
 bgR = '0000' + fadeOutColour.substring(1,3)
 bgG = '0000' + fadeOutColour.substring(3,5)
 bgB = '0000' + fadeOutColour.substring(5,7)
 currR = new Array(numLinks);
 currG = new Array(numLinks);
 currB = new Array(numLinks);
 count = new Array(numLinks);
 fadeOut = new Array(numLinks);
 continuous = new Array(numLinks);
 newColour = new Array(numLinks);
 tID = new Array(numLinks);
 redInterval = toDecimal(bgR) / numFadeLevels;
 greenInterval = toDecimal(bgG) / numFadeLevels;
 blueInterval = toDecimal(bgB) / numFadeLevels;
 initArray(currR,numLinks,0);
 initArray(currG,numLinks,0);
 initArray(currB,numLinks,0);
 initArray(count,numLinks,0);
 initArray(fadeOut,numLinks,true);
 initArray(continuous,numLinks,true);
}
function startFade(id)
{
 if(fadeOut[id] == true)
 { /*move colour towards background colour (increment)*/
  currR[id] += redInterval;
  currG[id] += greenInterval;
  currB[id] += blueInterval;
  newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);
  if(++count[id] == numFadeLevels)
  {
   fadeOut[id] = false;
  }
 }
 else
 {
  currR[id] -= redInterval;
  currG[id] -= greenInterval;
  currB[id] -= blueInterval;
  newColour[id] = '#' + (toHex(currR[id])).substring(4,6) + (toHex(currG[id])).substring(4,6) + (toHex(currB[id])).substring(4,6);

  if(--count[id] == 0)

  {
   fadeOut[id] = true;
  }
 }

 if(continuous[id] == true)

 {
  document.getElementById(id).style.color = newColour[id]; 
 }

 else

 {

  document.getElementById(id).style.color = hoverColour;

 }

 clearTimeout(tID[id]);

 tID[id]=setTimeout('startFade(' + id + ')', rate);

}

function continueFade(id)

{
 continuous[id] = true;
}

function stopFade(id)

{
 continuous[id] = false;
}

function StartTimers()

{
 for(id=0; id<numLinks; id++)
 {
  t=setTimeout('startFade(' + id + ')', id*100);
 }

}
initLinks('#FFFFFF', 6, '#FFCC77');
//-->
</script>
<a class="links" id="0" onmouseover="stopFade('0');" onmouseout="continueFade('0');" href="http://www.csrcode.cn/html/txdm/tcys/1061.htm">超级漂亮的几款清新、常用的网页CSS布局配色实例</a>
<br>
<a class="links" id="1" onmouseover="stopFade('1');" onmouseout="continueFade('1');" href="http://www.csrcode.cn/html/txdm/tcys/1060.htm">CSS制作斜角上有背景图片的Div层</a>
<br>
<a class="links" id="2" onmouseover="stopFade('2');" onmouseout="continueFade('2');" href="http://www.csrcode.cn/html/txdm/tcys/1059.htm">Js实现的层展开、层折叠效果,默认时候层是折叠的</a>
<br>
<a class="links" id="3" onmouseover="stopFade('3');" onmouseout="continueFade('3');" href="http://www.csrcode.cn/html/txdm/tcys/1058.htm">DIV始终固定在网页右下角位置的CSS实现方法</a>
<br>
<a class="links" id="4" onmouseover="stopFade('4');" onmouseout="continueFade('4');" href="http://www.csrcode.cn/html/txdm/tcys/1057.htm">JavaScript未知高度元素的垂直居中的方法</a>
<br>
<a class="links" id="5" onmouseover="stopFade('5');" onmouseout="continueFade('5');" href="http://www.csrcode.cn/html/txdm/txtx/1031.htm">鼠标接触或者离开图片时,图片大小会相应变化</a>
<script language="javascript" type="text/javascript">
<!--
setTimeout('StartTimers()', 1000); //-->
</script>
</body>
</html>
<br><br>
<br>JS需要反应一下,请稍等......<br><hr>
<p align="center">本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。来源:源码爱好者</p>

本站已开启防盗链,请根据代码中对应的url地址下载保存特效所需的图片、flash和js文件,请见谅,谢谢.
(本文由 CsrCode.CN|芯晴网页特效 收集丨www.CsrCode.cn
本文网址:
评论信息
抱歉,本文暂停评论留言。