인터넷정보

fade in/out

알 수 없는 사용자 2007. 10. 17. 17:56


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>

반응형