本文实例讲述了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];}<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程序设计有所帮助。
