This article is an example of JS implementation of text link induction mouse fade color Change method. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<title>js implement text link induction mouse fade </TITLE> change color
</HEAD>
<BODY>
<script language= "javascript" type= "Text/javascript" >
StartColor = "#671700"; Define link Colors
EndColor = "#D8D1C5"; Define the color to be gradient to the last
Stepin = 17;
StepOut = 23;
/*
Defines whether to have all text links automatically gradient, true to Yes, false to No
*/
Autofade = true;
/*
Define the class Class:fade in the CSS style here, and if true, then add the fade style to the gradient link.
*/
Sloppyclass = false;
Hexa = new Makearray (16);
for (var i = 0; i < 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 ());
var Fadeid = new Array ();
function Dehexize (Color) {
var Colorarr = new Makearray (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);
}
}
}
return Colorarr;
}
function Domouseover () {
if (document.all) {
var srcelement = event.srcelement;
if (Srcelement.tagname = "A" && autofade) | | srcelement.classname = = "Fade" | | (Sloppyclass && srcElement.className.indexOf ("Fade")!=-1))
Fade (Startcolor,endcolor,srcelement.uniqueid,stepin);
}
}
function Domouseout () {
if (document.all) {
var srcelement = event.srcelement;
if (Srcelement.tagname = "A" && autofade) | | srcelement.classname = = "Fade" | | (Sloppyclass && srcElement.className.indexOf ("Fade")!=-1))
Fade (endcolor,startcolor,srcelement.uniqueid,stepout);
}
}
function Makearray (n) {
This.length = n;
for (var i = 1; I <= n; i++)
This[i] = 0;
return this;
}
function Hex (i) {
if (I < 0)
return "00";
else if (i > 255)
return "FF";
Else
Return "" + Hexa[math.floor (I/16)] + hexa[i%16];}
function SetColor (R, G, B, Element) {
var hr = hex (r); var hg = Hex (g); var HB = hex (b);
Element.style.color = "#" +HR+HG+HB;
}
function Fade (s,e, Element,step) {
var sr = S[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var EB = e[2];
if (fadeid[0]!= null && fade[0]!= element) {
SetColor (Sr,sg,sb,eval (fadeid[0));
var i = 1;
while (I < fadeid.length) {
Cleartimeout (Fadeid[i]);
i++;
}
}
for (var i = 0; I <= step; i++) {
Fadeid[i+1] = settimeout ("SetColor" ("+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+ ");
}
Fadeid[0] = element;
}
</script>
<p><a href= "Http://www.jb51.net" > Mouse on this text link to view preview effect </a></p>
</BODY>
</HTML>
I hope this article will help you with your JavaScript programming.
