تصف هذه المقالة طريقة JS لتحقيق رابط النص الذي يستشعر الماوس يتلاشى داخل وخارج لتغيير اللون. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز كما يلي: <! doctype html public "-// w3c // dtd html 4.0 transitional // en">
<html>
<head>
<TITLE> تنفذ JS يتلاشى رابط النص الذي يتلاشى الماوس داخل وخارج لتغيير اللون </title>
</head>
<body>
<script language = "javaScript" type = "text/javaScript">
StartColor = "#671700" ؛ // تحديد لون الرابط
endColor = "#d8d1c5" ؛ // تحديد اللون ليكون التدرج إلى آخر
Stepin = 17 ؛
Stepout = 23 ؛
/*
حدد ما إذا كنت تريد التدرج تلقائيًا جميع روابط النص ، True هو نعم ، خطأ لا
*/
autofade = صحيح ؛
/*
هنا فئة الفصل: تتلاشى في نمط CSS. إذا كان هذا صحيحًا ، فأنت بحاجة إلى إضافة هذا النمط المتلاشى إلى الرابط الذي تريد التدرج.
*/
sloppyclass = false ؛
hexa = جديد makearray (16) ؛
لـ (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 () ؛
وظيفة dehexize (color) {
var colorarr = new makearray (3) ؛
لـ (i = 1 ؛ i <7 ؛ i ++) {
لـ (j = 0 ؛ j <16 ؛ j ++) {
if (color.charat (i) == Hexa [j]) {
إذا (أنا ٪ 2! = 0)
colorarr [math.floor ((I-1)/2)] = eval (j)*16 ؛
آخر
colorarr [math.floor ((I-1)/2)]+= eval (j) ؛
}
}
}
إرجاع Colorarr ؛
}
وظيفة 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) ؛
}
}
وظيفة 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) ؛
}
}
وظيفة makearray (n) {
this.length = n ؛
لـ (var i = 1 ؛ i <= n ؛ i ++)
هذا [i] = 0 ؛
إرجاع هذا ؛
}
وظيفة hex (i) {
إذا (أنا <0)
العودة "00" ؛
آخر إذا (أنا> 255)
إرجاع "FF" ؛
آخر
إرجاع "" " + Hexa [Math.Floor (I/16)] + Hexa [i ٪ 16] ؛}
وظيفة setColor (R ، G ، B ، Element) {
var hr = hex (r) ؛ var hg = Hex (g) ؛ var hb = hex (b) ؛
element.style.color = "#"+hr+hg+hb ؛
}
وظيفة تلاشي (S ، E ، العنصر ، الخطوة) {
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 ؛
بينما (أنا <fadeid.length) {
ClearTimeout (fadeid [i]) ؛
i ++ ؛
}
}
لـ (var i = 0 ؛ i <= step ؛ i ++) {
fadeid [i + 1] = setTimeout ("setColor (Math.floor (" + sr + " * ((" + step + " -" + i + ")/" + step + ") +" + er + " * (" + i + "/" + " +
الخطوة + ")) ، 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> <a href = "// www.vevb.com"> ضع الماوس على الرابط النص هذا لعرض تأثير المعاينة </a> </p>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.