บทความนี้อธิบายวิธีการของ 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;
-
กำหนดว่าจะไล่ระดับลิงค์ข้อความทั้งหมดโดยอัตโนมัติจริงหรือไม่ใช่, เท็จไม่ใช่
-
autofade = true;
-
นี่คือคลาสคลาส: จางหายไปในสไตล์ 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 = DomaineAut;
startColor = deHexize (startColor.ToLowerCase ());
endcolor = dehexize (endcolor.tolowercase ());
var fadeid = new Array ();
ฟังก์ชั่น dehexize (สี) {
var colorarr = makearray ใหม่ (3);
สำหรับ (i = 1; i <7; i ++) {
สำหรับ (j = 0; j <16; j ++) {
if (color.charat (i) == hexa [j]) {
ถ้า (i%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.srelement;
if ((srcelement.tagname == "a" && autofade) || srcelement.classname == "Fade" || (sloppyclass && srcelement.classname.indexof ("fade")! = -1)))
จาง (startColor, endcolor, srcelement.uniqueid, stepin);
-
-
ฟังก์ชั่น domouseout () {
if (document.all) {
var srcelement = event.srelement;
if ((srcelement.tagname == "a" && autofade) || srcelement.classname == "Fade" || (sloppyclass && srcelement.classname.indexof ("fade")! = -1)))
จาง (endcolor, startColor, srcelement.uniqueid, stepout);
-
-
ฟังก์ชั่น makearray (n) {
this.length = n;
สำหรับ (var i = 1; i <= n; i ++)
นี่ [i] = 0;
คืนสิ่งนี้;
-
ฟังก์ชั่น hex (i) {
ถ้า (i <0)
กลับ "00";
อื่นถ้า (i> 255)
กลับ "ff";
อื่น
return "" + hexa [math.floor (i/16)] + hexa [i%16];}
ฟังก์ชั่น setColor (r, g, b, องค์ประกอบ) {
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]! = องค์ประกอบ) {
SetColor (Sr, SG, SB, Eval (FadeID [0]));
var i = 1;
ในขณะที่ (i <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 + "/" +
step + ")), math.floor (" + sg + " * ((" + step + " -" + i + ")/" + step + ") +" + eg + " * (" + i + "/" + step +
")), math.floor ("+sb+" * (("+step+"-"+i+")/"+step+")+"+eb+" * ("+i+"/"+step+"),"+element+");", i * step);
-
fadeid [0] = องค์ประกอบ;
-
</script>
<p> <a href = "// www.vevb.com"> วางเมาส์บนลิงก์ข้อความนี้เพื่อดูเอฟเฟกต์ตัวอย่าง </a> </p>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน