fade in/out

인터넷정보

fade in/out

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

http://oxtag.com/html/ex/fade_inout.html

<html>

<head>

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>

<tr>

http://oxtag.com/ <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>

http://oxtag.com/ <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>

http://oxtag.com/ <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>

</td>

- ♡ 카멜롯™의 소스천국 태그피아 ♡

- ♡ 태그 기초부터 중수 까지 ♡

- ♡ 기타 잡동사니 모음 ♡

</td>

</tr>

</table>

자바스크립트로 특정 영역 페이드인/페이드아웃 
사용 법은 아래 소스의 자바스크립트 영역을 복사해서 필요한 문서에 넣습니다. 
(혹은 .js 파일로 만들어 링크시켜도 되겠지요) 
그리고 페이드 시킬 영역을 [span] 태그 등으로 감싸준 다음 적절한 아이디 값을 줍니다. 
그리고 스크립트 뒷 부분에 다음과 같은 형식으로 페이드리스트에 아이디를 추가합니다. 
fadeList = fadeAdd('home_head', 0, 0, 0, 255, 255, 255, fadeList); 
fadeAdd 함수에 들어가는 변수는 순서대로 영역아이디, 페이드인 될 빨강, 
페이드 될 녹색, 페이드인 될 파랑, 페이드아웃 될 빨강, 페이드아웃 될 녹색, 
페이드아웃 될 파랑, fadeLis(이건 그냥 적어주세요. 제가 자바스크립트에서 변수의 범위를 잘 몰라서) 
그리고 페이드인/아웃 제어는 적절한 곳에서 fadeIn(페이드인 시킬 아이디), 
fadeIn(페이드아웃 시킬 아이디) 함수를 불러주면 됩니다. 
아래의 예제 소스에서는 검을 글씨에 마우스오버/아웃 할 때 각각 인/아웃 시키도록 했죠. 
 
그 외에 바꿀만한 변수는 
　fadeDelay : 셋인터벌 함수를 부르는 밀리초입니다. 
　fadeStep : 페이드 단계의 총 수입니다. 
이고요, 위의 두개의 숫자를 적절히 조절해서 페이드 속도를 조절하세요.

아마 이건 넷스에서는 잘 안될 것 같네요. 
아이디 가지고 오브젝트로 할당하는 데를 고치면 될 듯.

</body>

</html>

'인터넷정보' 카테고리의 다른 글

원 클릭으로 클립보드에 복사하기(우측 태그피아 배너) (0)	2007.10.17
textarea 늘리기/줄이기 (0)	2007.10.17
textarea 늘리기/줄이기 (0)	2007.10.17
keystroke - 지정한 텍스트 타이핑시 연결된 URL로 이동 (0)	2007.10.17
keystroke - 지정한 텍스트 타이핑시 연결된 URL로 이동 (0)	2007.10.17
fade in/out (0)	2007.10.17
페이지 로딩될때 준비한 메시지 로딩시까지 보여주기 - 로딩바 (0)	2007.10.17
페이지 로딩될때 준비한 메시지 로딩시까지 보여주기 - 로딩바 (0)	2007.10.17
스크롤바 꾸미기 툴 - 제너레이터 (0)	2007.10.17
스크롤바 꾸미기 툴 - 제너레이터 (0)	2007.10.17

현재글fade in/out

폰트, 우편번호검색, 혈액형, 생활의지혜, 생활의 지혜, 영문 우편번호, 레크레이션, font, 무한도전, 우편번호, 팝업, 페이징, 애드센스, 아토피, 게임, EBS지식채널, 꽃말, 새창, 셀렉트박스, 바베큐,

Today :
Yesterday :

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

INFOTIP

fade in/out

'인터넷정보' 카테고리의 다른 글

'인터넷정보'의 다른글

티스토리툴바

fade in/out

'인터넷정보' 카테고리의 다른 글

'인터넷정보'의 다른글

관련글

티스토리툴바