이 기사의 예에서는 JS를 사용하여 텍스트 링크 감지 마우스 페이드인 및 페이드아웃을 구현하여 색상을 변경하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. <헤드> JS는 색상을 변경하기 위해 텍스트 링크 감지 마우스 페이드 인 및 아웃을 구현합니다. <바디> <br> startColor = "#671700"; // 링크 색상 정의<br> endColor = "#D8D1C5"; // 끝까지 그라데이션할 색상을 정의합니다<br> 스텝인 = 17; 스텝아웃 = 23 <br> /*<br> 모든 텍스트 링크를 자동으로 그라데이션으로 만들 것인지 정의합니다. true는 예, false는 아니요를 의미합니다. <br> */<br> 자동 페이드 = true <br> /*<br> 여기서 CSS 스타일의 클래스를 정의하십시오. 이것이 사실이라면 이 페이드 스타일을 그라데이션이 되도록 링크에 추가해야 합니다 <br> */<br> 엉성한 클래스 = 거짓 <br> 헥사 = 새로운 makearray(16);<br> for(var i = 0; i 헥사[i] = i;<br> 헥사[10]="a"; 헥사[11]="b"; 헥사[13]="d"; 헥사[14]="e"; document.onmouseover = domouseover;<br> document.onmouseout = domouseout;<br> startColor = dehexize(startColor.toLowerCase());<br> endColor = dehexize(endColor.toLowerCase());<br> var fadeId = new Array();<br> 함수 dehexize(색상){<br> var colorArr = new makearray(3);<br> for (i=1; i for (j=0; j If (Color.charAt(i) == 헥사[j]){<br> 만약 (i%2 !=0)<br> colorArr[Math.floor((i-1)/2)]=eval(j)*16;<br> 그 외<br> colorArr[Math.floor((i-1)/2)] =eval(j);<br> }<br> }<br> }<br> colorArr 반환<br> }<br> 함수 domouseover() {<br> if(document.all){<br> var srcElement = event.srcElement;<br> if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))<br> fade(startColor,endColor,srcElement.uniqueID,stepIn); }<br> }<br> 함수 domouseout() {<br> if (document.all){<br> var srcElement = event.srcElement;<br> If ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))<br> fade(endColor,startColor,srcElement.uniqueID,stepOut);<br> }<br> }<br> 함수 makearray(n) {<br> This.length = n;<br> for(var i = 1; i <= n; i )<br /> 이[i] = 0;<br /> 이것을 돌려주세요;<br /> }<br /> 함수 16진수(i) {<br /> (i < 0)인 경우<br /> "00"을 반환합니다.<br /> 그렇지 않으면 (i > 255)<br /> "ff"를 반환합니다.<br /> 그 외<br /> return "" 헥사[Math.floor(i/16)] 헥사[i ];}<br /> 함수 setColor(r, g, b, 요소) {<br /> var hr = 16진수(r); var hg = 16진수(g); var hb = 16진수(b);<br /> element.style.color = "#" 시간 hg hb;<br /> }<br /> 기능 페이드(s,e, 요소,단계){<br /> var sr = s[0]; var sg = s[1];<br /> var er = e[0]; var eg = e[1]; var eb = e[2];<br /> <br /> if (fadeId[0] != null && fade[0] != 요소){<br /> setColor(sr,sg,sb,eval(fadeId[0]));<br /> var i = 1;<br /> while(i < fadeId.length){<br /> clearTimeout(fadeId[i]);<br /> 나 ;<br /> }<br /> }<br /> for(var i = 0; i <= step; i ) {<br /> fadeId[i 1] = setTimeout("setColor(Math.floor(" sr " *(( " step " - " i " )/ " step " ) " er " * (" i "/" <br /> step ")),Math.floor(" sg " * (( " step " - " i " )/ " step " ) " eg " * (" i "/" step <br /> ")),Math.floor(" sb " * ((" 단계 "-" i ")/" 단계 ") " eb " * (" i "/" 단계 "))," 요소 ");",i *단계);<br /> }<br /> fadeId[0] = 요소;<br /> }<br /> 미리보기 효과를 보려면 이 텍스트 링크 위에 마우스를 올리세요
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
