本文實例講述了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程式設計有所幫助。
