Artikel ini menjelaskan metode JS untuk mewujudkan tautan teks mouse penginderaan mouse memudar masuk dan keluar untuk mengubah warna. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd html 4.0 transisi // en">
<Html>
<head>
<Title> JS mengimplementasikan tautan teks penginderaan mouse memudar masuk dan keluar untuk mengubah warna </iteme>
</head>
<body>
<bahasa skrip = "javascript" type = "text/javascript">
startColor = "#671700"; // Tentukan warna tautan
endcolor = "#d8d1c5"; // Tentukan warna menjadi gradien sampai terakhir
Stepin = 17;
Stepout = 23;
/*
Tentukan apakah akan secara otomatis gradien semua tautan teks, benar adalah ya, false adalah tidak
*/
otomatis = true;
/*
Berikut adalah kelas kelas: fade dalam gaya CSS. Jika benar, maka Anda perlu menambahkan gaya fade ini ke tautan yang ingin Anda gradien.
*/
sloppyclass = false;
hexa = Makearray baru (16);
untuk (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 = array baru ();
fungsi dehexize (warna) {
var colorarr = MakeArray baru (3);
untuk (i = 1; i <7; i ++) {
untuk (j = 0; j <16; j ++) {
if (color.charat (i) == hexa [j]) {
if (i%2! = 0)
colorarr [math.floor ((i-1)/2)] = eval (j)*16;
kalau tidak
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);
}
}
fungsi makearray (n) {
this.length = n;
untuk (var i = 1; i <= n; i ++)
ini [i] = 0;
kembalikan ini;
}
function hex (i) {
if (i <0)
mengembalikan "00";
lain jika (i> 255)
mengembalikan "ff";
kalau tidak
return "" + hexa [math.floor (i/16)] + hexa [i%16];}
fungsi setColor (r, g, b, elemen) {
var hr = hex (r); var hg = hex (g); var hb = hex (b);
element.style.color = "#"+hr+hg+hb;
}
fungsi fade (s, e, elemen, langkah) {
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]! = elemen) {
setColor (SR, SG, SB, eval (fadeid [0]));
var i = 1;
while (i <fadeid.length) {
ClearTimeout (fadeid [i]);
i ++;
}
}
untuk (var i = 0; i <= langkah; i ++) {
fadeid [i + 1] = setTimeout ("setColor (math.floor (" + sr + " * ((" + langkah + " -" + i + ")/" + langkah + ") +" + er + " * (" + i + "/" +
Langkah + ")), math.floor (" + sg + " * ((" + langkah + " -" + i + ")/" + langkah + ") +" + misalnya + " * (" + i + "/" + langkah +
")), Math.floor ("+sb+" * (("+langkah+"-"+i+")/"+langkah+")+"+eb+" * ("+i+"/"+langkah+")),"+elemen+");", i * step);
}
fadeid [0] = elemen;
}
</script>
<p> <a href = "// www.vevb.com"> Letakkan mouse di tautan teks ini untuk melihat efek pratinjau </a> </p>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.