文本链接渐隐渐显效果-JS特效-爱易网页

文本链接渐隐渐显效果

日期：2014-05-18　浏览次数：20245 次

以下是程序代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
</HEAD>

startColor = "#671700"; // 定义链接颜色 
endColor = "#D8D1C5";  // 定义要渐变到最后的颜色

stepIn = 17;  
stepOut = 23;

/* 
定义是否让所有的文本链接自动渐变，true为是，false为否 
*/ 
autoFade = true;

/* 
在这里定义css样式里的类class：fade，如果为true，那么你要将要渐变的链接上加上此fade样式 
*/ 
sloppyClass = false;

hexa = new makearray(16); 
for(var i = 0; i < 10; i++) 
    hexa[i] = i; 
hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; 
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

document.onmouseover = domouseover; 
document.onmouseout = domouseout;

startColor = dehexize(startColor.toLowerCase()); 
endColor = dehexize(endColor.toLowerCase());

var fadeId = new Array();

function domouseover() { 
  if(document.all){ 
   var srcElement = event.srcElement; 
   if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) 
        fade(startColor,endColor,srcElement.uniqueID,stepIn);       
   } 
}

function domouseout() { 
  if (document.all){ 
   var srcElement = event.srcElement; 
    if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) 
        fade(endColor,startColor,srcElement.uniqueID,stepOut); 
    } 
}

function makearray(n) { 
    this.length = n; 
    for(var i = 1; i <= n; i++) 
        this[i] = 0; 
    return this; 
}

function hex(i) { 
    if (i < 0) 
        return "00"; 
    else if (i > 255) 
        return "ff"; 
    else 
       return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

function setColor(r, g, b, element) { 
      var hr = hex(r); var hg = hex(g); var hb = hex(b); 
      element.style.color = "#"+hr+hg+hb; 
}

</script>

</BODY> 
</HTML> 
<a HREF="http://www.wawaqin.com">让你的文本链接渐隐渐显</a>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

文本链接渐隐渐显效果

相关资料更多>

推荐阅读更多>