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程序设计有所帮助。