您的位置：首页 > Web前端 > JavaScript

JS实现文字链接感应鼠标淡入淡出改变颜色的方法

2015-02-26 00:00 891 查看

本文实例讲述了JS实现文字链接感应鼠标淡入淡出改变颜色的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>JS实现文字链接感应鼠标淡入淡出改变颜色</TITLE>

</HEAD>

<BODY>

<script language="javascript" type="text/javascript">

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 dehexize(Color){

 var colorArr = new makearray(3);

 for (i=1; i<7; i++){

  for (j=0; j<16; j++){

   if (Color.charAt(i) == hexa[j]){

    if (i%2 !=0)

     colorArr[Math.floor((i-1)/2)]=eval(j)*16;

    else

     colorArr[Math.floor((i-1)/2)]+=eval(j);

   }

  }

 }

 return colorArr;

}

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;

}

function fade(s,e, element,step){

 var sr = s[0]; var sg = s[1]; var sb = s[2];

 var er = e[0]; var eg = e[1]; var eb = e[2];

 

 if (fadeId[0] != null && fade[0] != element){

  setColor(sr,sg,sb,eval(fadeId[0]));

  var i = 1;

  while(i < fadeId.length){

   clearTimeout(fadeId[i]);

   i++;

   }

  }

    for(var i = 0; i <= step; i++) {

     fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +

   step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+

   ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);

  }

 fadeId[0] = element;

}

</script>

<p><a href="http://www.jb51.net">鼠标放在此文字链接上查看预览效果</a></p>

</BODY>

</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航