Cet article décrit la méthode de JS pour réaliser que la souris à détection de liaison texte s'estompe pour changer et sortir de la couleur. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! Doctype html public "- // w3c // dtd html 4.0 transitional // en">
<html>
<adal>
<Title> JS implémente le lien de texte Segnation de souris Fade dans et hors pour changer la couleur </Title>
</ Head>
<body>
<script lingots = "javascript" type = "text / javascript">
startColor = "# 671700"; // Définissez la couleur du lien
EndColor = "# d8d1c5"; // Définissez la couleur à gradient jusqu'au dernier
Stepin = 17;
pas à pas = 23;
/ *
Définissez si vous devez automatiquement dégrader tous les liens texte, vrai est oui, faux est non
* /
autofade = true;
/ *
Voici la classe de classe: Fade dans le style CSS. Si c'est vrai, vous devez ajouter ce style de fondu au lien que vous souhaitez dégrader.
* /
salppyclass = false;
hexa = new makearray (16);
pour (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 = domaineOver;
document.onmouseout = domaineout;
startColor = dehexize (startColor.tolowerCase ());
EndColor = Dehexize (EndColor.TolowerCase ());
var fadeid = new Array ();
fonction déhexize (couleur) {
var colorarr = new makearray (3);
pour (i = 1; i <7; i ++) {
pour (j = 0; j <16; j ++) {
if (color.charat (i) == hexa [j]) {
if (i% 2! = 0)
colorarr [math.floor ((i-1) / 2)] = eval (j) * 16;
autre
ColorArr [math.floor ((i-1) / 2)] + = eval (j);
}
}
}
Retour Colorarr;
}
function DomouseOver () {
if (document.all) {
var srcelement = event.srcelement;
if ((srcelement.tagname == "a" && autofade) || srcelement.classname == "fade" || (salscyclass && 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" || (salscyclass && srcelement.classname.indexof ("fade")! = -1))
Fade (Endcolor, StartColor, Srcelement.UniqueId, pas à pas);
}
}
fonction makearray (n) {
this.length = n;
pour (var i = 1; i <= n; i ++)
this [i] = 0;
retourner ceci;
}
fonction hex (i) {
si (i <0)
retourner "00";
sinon si (i> 255)
retourner "ff";
autre
retour "" + hexa [math.floor (i / 16)] + hexa [i% 16];}
fonction setColor (r, g, b, élément) {
var hr = hex (r); var hg = hex (g); var hb = hex (b);
element.style.color = "#" + hr + hg + hb;
}
fonction Fade (s, e, élément, étape) {
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]! = élément) {
setColor (Sr, Sg, SB, EVAL (FadeId [0]));
var i = 1;
while (i <fadeid.length) {
ClearTimeout (Fadeid [i]);
i ++;
}
}
pour (var i = 0; i <= étape; i ++) {
fadeid [i + 1] = setTimeout ("setColor (math.floor (" + sr + "* ((" + étape + "-" + i + ") /" + étape + ") +" + er + "* (" + i + "/" +
étape + ")), math.floor (" + sg + "* ((" + étape + "-" + i + ") /" + étape + ") +" + eg + "* (" + i + "/" + étape +
")), Math.floor (" + sb + "* ((" + étape + "-" + i + ") /" + étape + ") +" + eb + "* (" + i + "/" + étape + "))," + élément + ");", i * Step);
}
fadeid [0] = élément;
}
</cript>
<p> <a href = "// www.vevb.com"> Mettez la souris sur ce lien texte pour afficher l'effet d'aperçu </a> </p>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.