本文实例讲述了JS实现文字链接感应鼠标淡入淡出改变颜色的方法。分享给大家供大家参考。具体实现方法如下: 复制代码 代码如下: JS实现文字链接感应鼠标淡入淡出改变颜色 <br /> startColor = "#671700"; // 定义链接颜色<br /> endColor = "#D8D1C5"; // 定义要渐变到最后的颜色<br /> stepIn = 17; <br /> stepOut = 23; <br /> /*<br /> 定义是否让所有的文本链接自动渐变,true为是,false为否<br /> */<br /> autoFade = true; <br /> /*<br /> 在这里定义css样式里的类class:fade,如果为true,那么你要将要渐变的链接上加上此fade样式<br /> */<br /> sloppyClass = false; <br /> hexa = new makearray(16);<br /> for(var i = 0; i < 10; i++)<br /> hexa[i] = i;<br /> hexa[10]="a"; hexa[11]="b"; hexa[12]="c";<br /> hexa[13]="d"; hexa[14]="e"; hexa[15]="f";<br /> document.onmouseover = domouseover;<br /> document.onmouseout = domouseout;<br /> startColor = dehexize(startColor.toLowerCase());<br /> endColor = dehexize(endColor.toLowerCase());<br /> var fadeId = new Array();<br /> function dehexize(Color){<br /> var colorArr = new makearray(3);<br /> for (i=1; i<7; i++){<br /> for (j=0; j<16; j++){<br /> if (Color.charAt(i) == hexa[j]){<br /> if (i%2 !=0)<br /> colorArr[Math.floor((i-1)/2)]=eval(j)*16;<br /> else<br /> colorArr[Math.floor((i-1)/2)]+=eval(j);<br /> }<br /> }<br /> }<br /> return colorArr;<br /> }<br /> function domouseover() {<br /> if(document.all){<br /> var srcElement = event.srcElement;<br /> if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))<br /> fade(startColor,endColor,srcElement.uniqueID,stepIn); <br /> }<br /> }<br /> function domouseout() {<br /> if (document.all){<br /> var srcElement = event.srcElement;<br /> if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))<br /> fade(endColor,startColor,srcElement.uniqueID,stepOut);<br /> }<br /> }<br /> function makearray(n) {<br /> this.length = n;<br /> for(var i = 1; i <= n; i++)<br /> this[i] = 0;<br /> return this;<br /> }<br /> function hex(i) {<br /> if (i < 0)<br /> return "00";<br /> else if (i > 255)<br /> return "ff";<br /> else<br /> return "" + hexa[Math.floor(i/16)] + hexa[i%16];}<br /> function setColor(r, g, b, element) {<br /> var hr = hex(r); var hg = hex(g); var hb = hex(b);<br /> element.style.color = "#"+hr+hg+hb;<br /> }<br /> function fade(s,e, element,step){<br /> var sr = s[0]; var sg = s[1]; var sb = s[2];<br /> var er = e[0]; var eg = e[1]; var eb = e[2];<br /> <br /> if (fadeId[0] != null && fade[0] != element){<br /> setColor(sr,sg,sb,eval(fadeId[0]));<br /> var i = 1;<br /> while(i < fadeId.length){<br /> clearTimeout(fadeId[i]);<br /> i++;<br /> }<br /> }<br /> for(var i = 0; i <= step; i++) {<br /> fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +<br /> step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+<br /> ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);<br /> }<br /> fadeId[0] = element;<br /> }<br /> 鼠标放在此文字链接上查看预览效果 希望本文所述对大家的javascript程序设计有所帮助。