http://oxtag.com/html/ex/fade_inout.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ks_c_5601-1987">
<title></title>
<script language="JavaScript">
fadeDelay = 5;
fadeStep = 30;
fadeList = new Array();
fadeList[0] = new Array();
fadeList[0]['size'] = 0;
fadeList[0]['id'] = new Array();
function fadeAdd(newID, inRed, inGreen, inBlue, outRed, outGreen, outBlue, fadeList) {
size = (++fadeList[0]['size']);
fadeList[0]['id'][newID] = size;
fadeList[size] = new Array();
fadeList[size]['id'] = newID;
fadeList[size]['ob'] = document.all(newID);
fadeList[size]['ir'] = inRed;
fadeList[size]['ig'] = inGreen;
fadeList[size]['ib'] = inBlue;
fadeList[size]['or'] = outRed;
fadeList[size]['og'] = outGreen;
fadeList[size]['ob'] = outBlue;
fadeList[size]['md'] = null;
fadeList[size]['st'] = 0;
return fadeList;
}
function fadeIn(tarID) {
tarNo = fadeList[0]['id'][tarID];
fadeList[tarNo]['md'] = 'in';
}
function fadeOut(tarID) {
tarNo = fadeList[0]['id'][tarID];
fadeList[tarNo]['md'] = 'out';
}
function fade() {
size = fadeList[0]['size'];
// fading
for (i = 1; i <= size; i++) {
mode = fadeList[i]['md'];
obj = document.all(fadeList[i]['id']);
ir = fadeList[i]['ir'];
ig = fadeList[i]['ig'];
ib = fadeList[i]['ib'];
or = fadeList[i]['or'];
og = fadeList[i]['og'];
ob = fadeList[i]['ob'];
if (mode == "in") {
fadeList[i]['st']++;
r = or + (ir - or) * (fadeList[i]['st'] / fadeStep);
g = og + (ig - og) * (fadeList[i]['st'] / fadeStep);
b = ob + (ib - ob) * (fadeList[i]['st'] / fadeStep);
r = Math.floor(r);
g = Math.floor(g);
b = Math.floor(b);
rgb = "rgb(" + r + ", " + g + ", " + b + ")";
obj.style.color = rgb;
} else if (mode == "out") {
fadeList[i]['st']--;
r = or + (ir - or) * (fadeList[i]['st'] / fadeStep);
g = og + (ig - og) * (fadeList[i]['st'] / fadeStep);
b = ob + (ib - ob) * (fadeList[i]['st'] / fadeStep);
r = Math.floor(r);
g = Math.floor(g);
b = Math.floor(b);
rgb = "rgb(" + r + ", " + g + ", " + b + ")";
obj.style.color = rgb;
}
if ((fadeList[i]['st'] == 0 && fadeList[i]['md'] == "out") || (fadeList[i]['st'] == fadeStep && fadeList[i]['md'] == "in"))
fadeList[i]['md'] = null;
}
}
fadeList = fadeAdd('home_head', 0, 0, 0, 255, 255, 255, fadeList);
fadeList = fadeAdd('home', 51, 153, 255, 255, 255, 255, fadeList);
fadeList = fadeAdd('worx_head', 0, 0, 0, 255, 255, 255, fadeList);
fadeList = fadeAdd('worx', 51, 153, 255, 255, 255, 255, fadeList);
fadeList = fadeAdd('sihary_head', 0, 0, 0, 255, 255, 255, fadeList);
fadeList = fadeAdd('sihary', 51, 153, 255, 255, 255, 255, fadeList);
</script>
</head>
<body onLoad="fadeTimer = setInterval('fade()', 10);" onUnLoad="clearInterval(fadeTimer);" style="background: #fff;">
<table border="0" cellspacing="05" cellpadding="0" style="width: 100%; height: 100; vertical-align: middle; line-height: 150%;">
<tr>
<td style="text-align:right; width: 50%; font-family: tahoma sans-serif;">
<span id="home_head" style="color:#fff; font-size: 8pt; font-weight: bold;">http://oxtag.com/ </span
><a href="http://oxtag.com/" style="color:rgb(0, 0, 0); text-decoration:none; font-size: 8pt; font-weight:bold"
onMouseOver="fadeIn('home'); fadeIn('home_head');"
onMouseMove="fadeIn('home'); fadeIn('home_head');"
onMouseOut="fadeOut('home'); fadeOut('home_head');">Tagpia</a><br>
<span id="worx_head" style="color:#fff; font-size: 8pt; font-weight: bold;">http://oxtag.com/ </span
><a href="http://oxtag.com/" style="color:rgb(0, 0, 0); text-decoration:none; font-size: 8pt; font-weight:bold"
onMouseOver="fadeIn('worx'); fadeIn('worx_head');"
onMouseMove="fadeIn('worx'); fadeIn('worx_head');"
onMouseOut="fadeOut('worx'); fadeOut('worx_head');">T A G</a><br>
<span id="sihary_head" style="color:#fff; font-size: 8pt; font-weight: bold;">http://oxtag.com/ </span
><a href="http://oxtag.com/" style="color:rgb(0, 0, 0); text-decoration:none; font-size: 8pt; font-weight:bold"
onMouseOver="fadeIn('sihary'); fadeIn('sihary_head');"
onMouseMove="fadeIn('sihary'); fadeIn('sihary_head');"
onMouseOut="fadeOut('sihary'); fadeOut('sihary_head');">잡동사니</a><br>
</td>
<td style="text-align: left; width: 50%; font-family: tahoma sans-serif;">
<span id="home" style="color:#fff; font-size: 8pt;"> - ♡ 카멜롯™의 소스천국 태그피아 ♡</span><br>
<span id="worx" style="color:#fff; font-size: 8pt;"> - ♡ 태그 기초부터 중수 까지 ♡</span><br>
<span id="sihary" style="color:#fff; font-size: 8pt;"> - ♡ 기타 잡동사니 모음 ♡</span>
</td>
</tr>
</table>
<br><br><br>
<font style=font-size:9pt;>
자바스크립트로 특정 영역 페이드인/페이드아웃 <br>
사용 법은 아래 소스의 자바스크립트 영역을 복사해서 필요한 문서에 넣습니다. <br>
(혹은 .js 파일로 만들어 링크시켜도 되겠지요) <br>
그리고 페이드 시킬 영역을 [span] 태그 등으로 감싸준 다음 적절한 아이디 값을 줍니다. <br>
그리고 스크립트 뒷 부분에 다음과 같은 형식으로 페이드리스트에 아이디를 추가합니다. <br>
fadeList = fadeAdd('home_head', 0, 0, 0, 255, 255, 255, fadeList); <br>
fadeAdd 함수에 들어가는 변수는 순서대로 영역아이디, 페이드인 될 빨강, <br>
페이드 될 녹색, 페이드인 될 파랑, 페이드아웃 될 빨강, 페이드아웃 될 녹색, <br>
페이드아웃 될 파랑, fadeLis(이건 그냥 적어주세요. 제가 자바스크립트에서 변수의 범위를 잘 몰라서) <br>
그리고 페이드인/아웃 제어는 적절한 곳에서 fadeIn(페이드인 시킬 아이디), <br>
fadeIn(페이드아웃 시킬 아이디) 함수를 불러주면 됩니다. <br>
아래의 예제 소스에서는 검을 글씨에 마우스오버/아웃 할 때 각각 인/아웃 시키도록 했죠. <br>
<br>
그 외에 바꿀만한 변수는 <br>
fadeDelay : 셋인터벌 함수를 부르는 밀리초입니다. <br>
fadeStep : 페이드 단계의 총 수입니다. <br>
이고요, 위의 두개의 숫자를 적절히 조절해서 페이드 속도를 조절하세요. <br>
아마 이건 넷스에서는 잘 안될 것 같네요. <br>
아이디 가지고 오브젝트로 할당하는 데를 고치면 될 듯. <br> <br> <br>
</body>
</html>
'인터넷관련' 카테고리의 다른 글
| 페이지 로딩될때 준비한 메시지 로딩시까지 보여주기 - 로딩바 (0) | 2008.01.29 |
|---|---|
| keystroke - 지정한 텍스트 타이핑시 연결된 URL로 이동 (0) | 2008.01.29 |
| 스크롤바 꾸미기 툴 - 제너레이터 (0) | 2008.01.29 |
| 스크롤바를 이미지로 바꿔보세요.(공지용) (0) | 2008.01.29 |
| 평범한 사이트맵은 싫다!!! (플래시 같은 사이트맵 꾸미기) (0) | 2008.01.29 |
| 특정 날짜로부터 현째 날짜까지 일수 구하기 (0) | 2008.01.29 |
| 페이지 로딩시 특정 시간 흐른 후 새창띄우기 및 닫기 (0) | 2008.01.29 |
| 핫키 (0) | 2008.01.29 |
