메뉴 건너뛰기

검색창 닫기

전국분동대여

일반 자료실

컴퓨터/IT 링크 텍스트에 마우스를 대면 페이드 효과를 보여줍니다

GACHIMOA 2020.07.23 12:16 조회 수 : 211

링크 텍스트에 마우스를 대면 페이드 효과를 보여줍니다

 

다양한 색상으로 텍스트 링크에 페이드 효과를 줄 수 있는 스크립트 입니다
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title> Script </title>
</head>
<!---- [1단계] 아래와 같은 방법으로 태그와 코드를 복사 해 넣으세요 --->
<script>
<!--
// 페이드 될 색상을 입력 하세요 (# 은 붙이지 마세요)
var fadeTo = "00FF00";
var fiBy = 6;
var foBy = 10;
var speed = 10;
var ignoreClass = "ignore";
var opera, ie, dom, x = 0, oc, fader, ocs = new Array();
if (navigator.userAgent.indexOf("Opera") != -1) opera = true
else if (document.all && !opera) ie = true
else if (!document.all && document.getElementById) dom = true;
function convertRGB(z)
        {
                var newfcS = "", splitter = "";
                splitter = z.split(",");
                splitter[0] = parseInt(splitter[0].substring(4, splitter[0].length));
                splitter[1] = parseInt(splitter[1]);
                splitter[2] = parseInt(splitter[2].substring(0, splitter[2].length-1));
                for (var q = 0; q < 3; q++)
                        {
                                splitter[q] = splitter[q].toString(16);
                                if (splitter[q].length == 1) splitter[q] = "0" + splitter[q];
                                newfcS += splitter[q];
                        }
                return newfcS;
        }
function currentColour(index)
        {
                var temp, cc;
                if (opera) cc = document.links[index].style.color
                else if (ie) cc = document.links[index].currentStyle.color
                else if (dom) cc = document.defaultView.getComputedStyle(document.links[index], '').getPropertyValue("color");
                if (cc.length == 4 && cc.substring(0, 1) == "#")
                        {
                                temp = "";
                                for (var a = 0; a < 3; a++)
                                        temp += cc.substring(a+1, a+2) + cc.substring(a+1, a+2);
                                cc = temp;
                        }
                else if (cc.indexOf("rgb") != -1) cc = convertRGB(cc)
                else if (cc.length == 7) cc = cc.substring(1, 7)
                else cc = fadeTo;
                return cc;
        }

function convert2Dec(hex)
        {        
                var rgb = new Array();
                for (var u = 0; u < 3; u++)
                        rgb[u] = parseInt(hex.substring(u*2, u*2+2), 16);
                return rgb;
        }
function newRGB(f, n, d)
        {
                var change;
                if (d == 1) change = fiBy
                else change = foBy;
                for (var g = 0; g < 3; g++)
                        {
                                if (n[g] > f[g] && n[g] - change >= 0) n[g] -= change;
                                if (n[g] < f[g] && n[g] + change <= 255) n[g] += change;
                        }
                return n;
        }
function fade(index, d)
        {
                var fc, nc, temp = new Array(), finished = false;
                nc = convert2Dec(currentColour(index));
                if (d == 1) fc = convert2Dec(fadeTo)
                else fc = convert2Dec(ocs[x]);
                temp = convert2Dec(currentColour(index));
                nc = newRGB(fc, nc, d);
                if ((nc[0] == temp[0]) && (nc[1] == temp[1]) && (nc[2] == temp[2]))
                        finished = true;
                if (!finished) document.links[x].style.color = "rgb(" + nc[0] + "," + nc[1] + "," + nc[2] + ")"
                else clearInterval(fader);
        }
function findLink(over)
        {
                if (document.layers) return;
                if (fader)
                        {
                                clearInterval(fader);
                                document.links[x].style.color = "#" + ocs[x];
                        }
                if (over && !this.id) this.id = over;
                x = 0;
                while (!(this.id == document.links[x].id) && (x < document.links.length))
                        x++;
                if (this.id == document.links[x].id)
                        {
                                oc = currentColour(x);
                                fader = setInterval("fade(" + x  + ", 1)", speed);
                        }
        }
function clearFade()
        {
                if (document.layers) return;
                if (fader) clearInterval(fader);
                fader = setInterval("fade(" + x + ", 0)", speed);
        }
function init()
        {
                for (var i = 0; i < document.links.length; i++)
                        {
                                ocs[i] = currentColour(i);
                                var currentOver = document.links[i].onmouseover;
                                var currentOut = document.links[i].onmouseout;
                                var ignoreIt = document.links[i].className == ignoreClass;
                                if (!ignoreIt) document.links[i].id = "link" + i;
                                if (!currentOver && !currentOut && !ignoreIt)
                                        {
                                                document.links[i].onmouseover = findLink;
                                                document.links[i].onmouseout = clearFade;
                                        }
                        }                
}
if (opera || ie || dom) window.onload = init;
//-->
</script>
<body>
<!---- [2단계] 아래와 같은 방법으로 태그와 코드를 복사 해 넣으세요 --->
<a href="#" onmouseover="findLink(this.id);" onmouseout="clearFade();"><b> Home Page</b></a>
</body>
</html>

이 게시물을
수정 삭제 목록
번호 제목 글쓴이
3421 심장 건강에 좋은 습관 8가지 [1] 뉴퐁
3420 잠잘 때 왼쪽으로 자면 생기는 신체 변화 7가지 [2] 뉴퐁
3419 스트레스를 줄이는 놀라운 방법 6가지 [2] 싹쓰리
3418 여성이 팬티에 대해 알아야 할 7가지 [3] 싹쓰리
3417 끓였던 물을 또 끓이면 안 되는 이유 [1] 싹쓰리
3416 "치주염 환자, 코로나 감염 땐 사이토카인 폭풍 가능성 높아" [1] 쌍둥이맘
3415 스마트스토어 상위 노출 꿀팁. 경쟁률 낮은 세부키워드 뽑는 방법 [2] 나혼자번다
3414 열감지 안면인식 출입관리솔루션 400만원짜리를 40만원에(정부지원사업) [1] file 나혼자번다
3413 전자렌지요리 만능 레시피 대공개!! [3] 나혼자번다
3412 식초로 집안을 반짝반짝하게!! 식초 청소법 [4] 쌍둥이맘
3411 마시고 남은 김빠진 맥주 활용법 [2] 쌍둥이맘
3410 계란을 먹은 후 절대 바로 먹으면 안되는 것들 쌍둥이맘
3409 아주 유용한 커피상식 쌍둥이맘
3408 간 건강과 지방간 완화에 아주 효과적인 채소는? [2] 싹쓰리
3407 골다공증 예방과 뼈에 아주 좋은 음식 8가지 싹쓰리
3406 체했을 때, 감기 걸렸을 때, 관절염 통증에는 이것이 최고!! 싹쓰리
3405 장을 편안하게 하면서 소화를 돕는 식품 5가지 [1] 싹쓰리
3404 초보운전자가 반드시 알아야 하는 고속도로 운전매너 5 [1] 싹쓰리
3403 머리카락이나 두피를 상하게 하는 사소한 습관 5 라이믹스
3402 어둡고 칙칙한 피부를 환하게 해주는 필수적인 습관 5 라이믹스
쓰기 태그
위로