JS实现文字链接感应鼠标淡入淡出改变颜色的方法
本文实例讲述了JS实现文字链接感应鼠标淡入淡出改变颜色的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"> <HTML> <HEAD> <TITLE>JS实现文字链接感应鼠标淡入淡出改变颜色</TITLE> </HEAD> <BODY> <scriptlanguage="javascript"type="text/javascript"> startColor="#671700";//定义链接颜色 endColor="#D8D1C5"; //定义要渐变到最后的颜色 stepIn=17; stepOut=23; /* 定义是否让所有的文本链接自动渐变,true为是,false为否 */ autoFade=true; /* 在这里定义css样式里的类class:fade,如果为true,那么你要将要渐变的链接上加上此fade样式 */ sloppyClass=false; hexa=newmakearray(16); for(vari=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()); varfadeId=newArray(); functiondehexize(Color){ varcolorArr=newmakearray(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); } } } returncolorArr; } functiondomouseover(){ if(document.all){ varsrcElement=event.srcElement; if((srcElement.tagName=="A"&&autoFade)||srcElement.className=="fade"||(sloppyClass&&srcElement.className.indexOf("fade")!=-1)) fade(startColor,endColor,srcElement.uniqueID,stepIn); } } functiondomouseout(){ if(document.all){ varsrcElement=event.srcElement; if((srcElement.tagName=="A"&&autoFade)||srcElement.className=="fade"||(sloppyClass&&srcElement.className.indexOf("fade")!=-1)) fade(endColor,startColor,srcElement.uniqueID,stepOut); } } functionmakearray(n){ this.length=n; for(vari=1;i<=n;i++) this[i]=0; returnthis; } functionhex(i){ if(i<0) return"00"; elseif(i>255) return"ff"; else return""+hexa[Math.floor(i/16)]+hexa[i%16];} functionsetColor(r,g,b,element){ varhr=hex(r);varhg=hex(g);varhb=hex(b); element.style.color="#"+hr+hg+hb; } functionfade(s,e,element,step){ varsr=s[0];varsg=s[1];varsb=s[2]; varer=e[0];vareg=e[1];vareb=e[2]; if(fadeId[0]!=null&&fade[0]!=element){ setColor(sr,sg,sb,eval(fadeId[0])); vari=1; while(i<fadeId.length){ clearTimeout(fadeId[i]); i++; } } for(vari=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><ahref="https://www.nhooo.com">鼠标放在此文字链接上查看预览效果</a></p> </BODY> </HTML>
希望本文所述对大家的javascript程序设计有所帮助。