Este artículo describe el método de JS para realizar el enlace de texto que detecta el mouse del mouse dentro y fuera para cambiar el color. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <
<html>
<Evista>
<title> js implementa el enlace de texto que detecta el mouse del mouse dentro y fuera para cambiar el color </title>
</ablo>
<Body>
<script language = "javaScript" type = "text/javaScript">
startColor = "#671700"; // Defina el color del enlace
endcolor = "#d8d1c5"; // Definir el color para graduar hasta el último
Stepin = 17;
paso a paso = 23;
/*
Definir si se gradúa automáticamente todos los enlaces de texto, verdadero es sí, el falso es no
*/
autofade = verdadero;
/*
Aquí está la clase de clase: Fade en el estilo CSS. Si es cierto, entonces debe agregar este estilo de desvanecimiento al enlace que desea gradiente.
*/
sloppyClass = false;
hexa = nuevo makearray (16);
para (var i = 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 = Domainover;
document.OnMouseOut = DomaineOut;
startColor = dehexize (startColor.tolowerCase ());
endcolor = dehexize (endcolor.tolowercase ());
var fadeid = new Array ();
función dehexize (color) {
var colorarr = new Makearray (3);
para (i = 1; i <7; i ++) {
para (j = 0; j <16; j ++) {
if (color.charat (i) == hexa [j]) {
if (i%2! = 0)
colorarr [math.floor ((i-1)/2)] = eval (j)*16;
demás
colorarr [math.floor ((i-1)/2)]+= eval (j);
}
}
}
regresar 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);
}
}
función makearray (n) {
this.length = n;
para (var i = 1; i <= n; i ++)
esto [i] = 0;
devolver esto;
}
función hex (i) {
if (i <0)
regresar "00";
más si (i> 255)
devolver "ff";
demás
return "" + hexa [math.floor (i/16)] + hexa [i%16];}
función setColor (r, g, b, elemento) {
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]! = elemento) {
setColor (SR, SG, SB, Eval (FadeID [0]));
var i = 1;
while (i <fadeid.length) {
ClearTimeOut (FadeID [i]);
i ++;
}
}
para (var i = 0; i <= step; i ++) {
FadeID [i + 1] = setTimeOut ("setColor (math.floor (" + sr + " * ((" + paso + " -" + i + ")/" + paso + ") +" + er + " * (" + i + "/" + +
paso + ")), math.floor (" + sg + " * ((" + paso + " -" + i + ")/" + paso + ") +" + eg + " * (" + i + "/" + paso +
")), Math.floor ("+Sb+" * (("+Step+"-"+i+")/"+paso+")+"+EB+" * ("+i+"/"+Step+")),"+elemento+");", i * paso);
}
FadeID [0] = elemento;
}
</script>
<p> <a href = "// www.vevb.com"> Ponga el mouse en este enlace de texto para ver el efecto de vista previa </a> </p>
</body>
</Html>
Espero que este artículo sea útil para la programación de JavaScript de todos.