이 기사에서는 텍스트 링크 감지 마우스 페이드를 인식하여 색상을 바꾸기 위해 JS의 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <! doctype html public "-// w3c // dtd html 4.0 Transitional // en">
<html>
<헤드>
<title> js는 텍스트 링크 감지 마우스 페이드 인과 아웃 색상 변경 </title>를 구현합니다.
</head>
<body>
<script language = "javaScript"type = "text/javaScript">
startColor = "#671700"; // 링크 색상을 정의합니다
endColor = "#d8d1c5"; // 마지막으로 그라디언트가 될 색상을 정의합니다.
stepin = 17;
의복 = 23;
/*
모든 텍스트 링크를 자동으로 구배할지 여부를 정의하십시오. true는 yes, false는 아니오입니다.
*/
AutoFade = true;
/*
CSS 스타일로 페이드 클래스 클래스는 다음과 같습니다. 사실이라면,이 페이드 스타일을 그라디언트하려는 링크에 추가해야합니다.
*/
sloppyclass = false;
Hexa = New Makearray (16);
for (var i = 0; i <10; i ++)
헥사 [i] = i;
헥사 [10] = "A"; Hexa [11] = "B"; Hexa [12] = "C";
Hexa [13] = "D"; Hexa [14] = "E"; 헥사 [15] = "F";
document.onmouseover = domaineover;
document.onmouseout = domaineout;
startColor = deHexize (startColor.TolowerCase ());
endColor = deHexize (endColor.TolowerCase ());
var fadeid = new Array ();
함수 dehexize (색) {
var colorarr = 새로운 makearray (3);
for (i = 1; i <7; i ++) {
for (j = 0; j <16; j ++) {
if (color.charat (i) == hexa [j]) {
if (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.srcelement;
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.srcelement;
if ((srcelement.tagname == "a"&& autofade) || srcelement.classname == "fade"|| (sloppyclass && srcelement.classname.indexof ( "fade")! = -1)))))).
페이드 (EndColor, StartColor, srcelement.uniqueid, stepout);
}
}
함수 makearray (n) {
this.length = n;
for (var i = 1; i <= n; i ++)
이것은 [i] = 0;
이것을 반환하십시오;
}
기능 16 진수 (i) {
if (i <0)
"00"반환;
그렇지 않으면 (i> 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);
요소 .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;
while (i <fadeid.length) {
클리어 타임 아웃 (fadeid [i]);
i ++;
}
}
for (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] = 요소;
}
</스크립트>
<p> <a href = "// www.vevb.com"> 미리보기 효과를보기 위해이 텍스트 링크에 마우스를 넣어 </a> </p>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.