묻고답하기

대충 주석을 한번 달아 봤어요.. ^^;

<HTML>
<HEAD>
<TITLE> JABA1009 ::: 플래쉬 같은 슬라이딩 메뉴 효과 </TITLE>
<!--1. 아래 스크립트를 HEAD 부분에 복사해 넣으세요. 없으면 그냥 두세요-->

<script>
<!-- Beginning of JavaScript -
var i_strength=0 // 그림자 필터 옵셋
var i_color=0 // 그림자 필터 색상 배열 인덱스
var max_strength=400 // 최대 크기

var shadowcolor=new Array() // 섀도우 색상을 배열로 담아서

shadowcolor[0]="FFFFFF"
shadowcolor[1]="EEEEEE"
shadowcolor[2]="DDDDDD"
shadowcolor[3]="CCCCCC"
shadowcolor[4]="BBBBBB"
shadowcolor[5]="AAAAAA"
shadowcolor[6]="999999"
shadowcolor[7]="888888"
shadowcolor[8]="777777"
shadowcolor[9]="666666"
shadowcolor[10]="555555"
shadowcolor[11]="444444"
shadowcolor[12]="333333"
shadowcolor[13]="222222"
shadowcolor[14]="111111"
shadowcolor[15]="000000"
shadowcolor[16]="000000"
shadowcolor[17]="000000"
shadowcolor[18]="000000"
shadowcolor[19]="000000"
shadowcolor[20]="000000"
shadowcolor[21]="000000"
shadowcolor[22]="000000"
shadowcolor[23]="000000"
shadowcolor[24]="000000"
var timer  // 필터 재귀 호출시 타임아웃 지정 변수
var speed=20 // 필터 재귀 호출시 시간 간격
var thisobj // 오브젝트를 담을 변수


function stopfilter(thisdiv){  // 스타일 필터 멈추기
   if (document.all) { // 익스플로러라면
       i_strength=0  //
       i_color=0  //
       clearTimeout(timer) // 타임아웃 클리어
               thisobj=thisdiv // 매개변수 레이어 오브젝트를 thisobj변수로 담음
       thisobj.style.filter=" " // 필터없앰
   }
}


function startfilter(thisdiv){ // 스타일 필터시작
   if (document.all) {  // 익스플로러라면
       i_strength=0
       i_color=0
       clearTimeout(timer) // 타임아웃 클리어
               thisobj=thisdiv // 매개변수 레이어 오브젝트를 thisobj변수로 담음
       morefilter() // 다음 필터적용함수 실행
   }
}

function morefilter(){
   if (i_strength <=max_strength) { // 그림자 옵셋이 최대 거리까지 떨어지지 않았으면
               thisobj.style.filter="dropShadow(color="+shadowcolor[i_color]+", offx="+i_strength+",offy=0)" // 색상 넣고 그림자를 가로로 움직임(0의 위치에서 최대 옵셋까지)
       i_strength=i_strength+20 // 옵셋을 20 늘림
       i_color++ // 컬러 배열 인덱스를 다음으로 이동
       timer = setTimeout("morefilter()",speed) // 재귀호출 실행 지정
   }
   else { // 그림자가 지정한 옵셋 거리 최대에 도달하면
       clearTimeout(timer) // 재귀호출 타이머 클리어
       lessfilter() // 다음 필터 적용함수 실행
   }
}

function lessfilter(){
   if (i_strength >=0) { // 그림자 옵셋이 0보다 크면
               thisobj.style.filter="dropShadow(color="+shadowcolor[i_color]+",offx="+i_strength+",offy=0)" // 색상 넣고 그림자 가로로 이동(최대 옵셋에서 0의 위치까지)
       i_strength=i_strength-20 // 옵셋을 20줄임
       i_color-- // 색상인덱스를 이전 색상으로 이동
       timer = setTimeout("lessfilter()",speed) // 재귀 호출
   }    
   else { // 옵셋이 0에 도달하면
       clearTimeout(timer) // 재귀호출 중지
       makepause() // 다음함수 실행
   }
}

function makepause(){
  timer = setTimeout("morefilter()",1000) // 1초뒤에 다시 morefilter와 lessfilter함수를 반복 실행되도록 지정
}

// - End of JavaScript - -->
</script>

<script language=javaScript>
var isNav = (navigator.appName.indexOf("Netscape")!=-1) // 넷스케이프여부 판단

var colors = new   Array("FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","F9F9F9","F1F1F1","E9E9E9","E1E1E1","D9D9D9","D1D1D1","C9C9C9","C1C1C1","B9B9B9","B1B1B1","A9A9A9","A1A1A1","999999","919191","898989","818181","797979","717171","696969","616161","  595959","515151","494949","414141","393939","313131","292929","212121","191919","111111","090909","000000")  // 배열지정
var i = -37
var msg = 0

var linkto = new Array() // 링크시킬 제목들
linkto[0] = "Home"
linkto[1] = "Email me"
linkto[2] = "Hotmail"
linkto[3] = "Micosoft"
linkto[4] = "Jaba1009"
linkto[5] = "Lycos"
linkto[6] = "Ask"
linkto[7] = "Yahoo"
linkto[8] = "Excite"

function startStrobe(msgnum)
           {msg=msgnum  // 매개변수 넘기기 (그냥 막바로 넣어도 되는데... 변수 낭비인 듯..--;)
           strobeEffect(msg,-37)} // 스트롭효과 함수 실행

function strobeEffect(msgnum,i)
{
           msg=msgnum  // 매개변수 넘기기.. 역시나 변수 낭비..
           if (i < 38){ // i값이 38보다 작은 경우
                        starttable = "<table width=200><td><center><font color=" + colors[Math.abs(i)] + " size=+2>"
                       endtable = "</font></a></center></td></table>"
                       fulltable = starttable + linkto[msg] + endtable // 링크 제목을 넣어서 가로 크기가 200인 테이블을 각각 만든다.
                       j = i + 1 // 지정한 색상을 바꾸기위한 색상 배열 인덱스를 증가 시킨다.
                                   if(isNav) // 넷스인경우
                                               {document.object0.document.write(fulltable) // object0에다가 위에서 만든 테이블을 넣는다.
                                               document.object0.document.close()} // 문서를 닫는다.
                                   else {object0.innerHTML = fulltable} // object0에 막바로 innerHTML을 이용하여 화면에 표시한다.
           }
           else {return false}
           setTimeout("strobeEffect(msg,j)",20) // 재귀 실행
           }

</script>
          
<style type="text/css">
body {cursor:crosshair;}
.mi { text-decoration:none; color:#C299F9; font-size:9pt; cursor:hand; }
.ms { text-decoration:none; color:#FEE101; font-size:10px; display:none; }
.t { padding:5; }
.sl { text-decoration:none; color:#FEE101; }
.sl:hover { text-decoration:underline; color:#FFFFCC; }
//.ddt { padding:5; text-align:right; position:absolute; left:0; top:-20; width:130;}
// display: block
</style>

<script LANGUAGE="JavaScript">
<!--
//var d = (navigator.userAgent.indexOf("MSIE 5")>-1) ; // 사용안함

if (parent && parent.gal_main) parent.gal_main.location='online/?station=101'; // 부모 프레임이나 부모프레임중 gal_main이란 프레임이 존재하면 gal_main의 주소는 online/?station=101으로 (별필요없는 구문인듯)

var d =(parseInt(navigator.appVersion)>=4 && navigator.appName=="Microsoft Internet Explorer"); 익스버전 4이상인경우 d는 true

items=9 ; // 아이템 갯수
fade_increment = new Array(items) ;
fade_present = new Array(items) ;
currentbranch=-1;

colordepth = new Array(10); // 변화시킬 색상 깊이
colordepth[0]="#707070";
colordepth[1]="#808080";
colordepth[2]="#909090";
colordepth[3]="#a0a0a0";
colordepth[4]="#b0b0b0";
colordepth[5]="#c0c0d0";
colordepth[6]="#d0d0d0";
colordepth[7]="#e0e0e0";
colordepth[8]="#f0f0f0";
colordepth[10]="#ffffff";
started=false ;


for (i=0;i<items;i++) { // fade_increment, fade_present 모든 배열값을 0으로 지정
           fade_increment[i]=0;
           fade_present[i]=0;
}

function s(item,statustext) {
           window.status=(statustext?statustext:' '); // 윈도우 상태창에 statustext값이 있으면 statustext을 아니면 빈문자를 출력
       if (started && d) { // 페이지가 스타트되고 익스 버전 4이상인경우
                       var curr=item;  //아이템을 curr에 저장
                       fade_increment[curr]=(statustext?40:-7); curr인덱스의 배열에 statustext값을 40과 -7을 번갈아 담음
           }
           return true; // 함수 되돌림
}

function fadeloop() {
           rep="";
           for (i=0;i<fade_increment.length;i++) { //fade_increment 배열 수만큼 반복 실행
                       rep+=" "+fade_present[i]; // rep값에 fade_present배열값을 스페이스로 구분하여 누적시킴(문자열합침)
                       fade_present[i]+=fade_increment[i] ; //fade_increment도 같이 더해 누적(문자열 합침)
                       if (fade_present[i]>=100) { // fade_present배열의 i번째 값이 100보다 크면
                                   fade_present[i]=100; // fade_present의 i번째 배열은 100
                                   fade_increment[i]=0; // fade_increment의 i번째 배열은 0
                       }
                       else if (fade_present[i]<=0) { //fade_present배열의 i번째 값이 0보다 작으면
                                   fade_present[i]=0;  // 둘다 0
                                   fade_increment[i]=0;
                       }
                       if (document.all['i'+i]) document.all['i'+i].style.color=colordepth[Math.round(fade_present[i]/10)]; 문서중에 아이디 값이 i0~i10 를 포함하는 오브젝트의 색상을 바꿈..
           }
           setTimeout('fadeloop()',50) ; // 재귀호출
}

function tog(b) {
           if (d) { // 익스플로러 4이상인경우
                       if (currentbranch==b) { // 매개변수 값 b의 값이 currentbranch와 동일하면
                                   document.all["s"+b].style.display='none'; // id값이 s매개변수 인 오브젝트를 감춘다.
                                   currentbranch=-1;                         // -1로 값을 지정
                       } else {
                                   if (currentbranch>-1) document.all["s"+currentbranch].style.display='none'; // 이전에 값을 토글형식으로 지정한다.
                                   document.all["s"+b].style.display='block';
                                   currentbranch=b;
                       }
           }
}

function positionitems() {
           for (a=0;a<items;a++) { 아이템 갯수만큼 실행한다.
                       document.all["t"+a].style.top=a*10; // id가 t0와같이 t숫자로 시작하는 모든 오브젝트의 상하 여백을 10픽셀로 맞춤
           }
}


function start() {
//            positionitems(); // 함수사용안함
           started=true ; // 시작됨을 변수로 지정
           if (d) fadeloop() ; //
}

//-->
</script>

<SCRIPT LANGUAGE="JavaScript">


<!-- Begin

function dropMenu() {  // 드롭메뉴
speed=1;  // 속도 조절
topdistance=100; // 상단 위치
items=9; // 아이템 갯수 (중복변수...)
y=-50; //
ob=1;
if (navigator.appName == "Netscape") { // 넷스케이프일 경우 속성값을 달리함(익스 넷스 구분 속성)
v=".top=",dS="document.",sD="";
}
else {
v=".pixelTop=",dS="",sD=".style";
  }
}

function scrollItems() { // 메뉴 아이템을 스크롤하는 함수
if (ob<items+1) { // 아이템 갯수 보다 ob갯수가 작을 경우(아이템 갯수만큼 실행하기)
    objectX="object"+ob; y+=10; eval(dS + objectX + sD + v + y); // document.object1.style.top 이런식의 구문인데.. 넷스와 익스 구분을 위해
    if (y<topdistance) setTimeout("scrollItems()",speed); // 최상단 위치보다 y가 작을 경우 재귀 실행
    else y=-50, topdistance+=40, ob+=1, setTimeout("scrollItems()",speed); // 아닐(현재 아이템이 다 이동되었을)경우 최상단 위치를 40더해서 다음아이템으로 이동
  }
}
// End -->
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#000000" onLoad="dropMenu(), scrollItems(), start();">

<!--3. BODY 부분에 아래의 스크립트를 복사해 넣으세요-->

<center>

<div id="object0" style="position:absolute; visibility:show; left:0px; top:40px; z-index:2"></div>
<div id="object1" style="position:absolute; visibility:show; left:0px; top:-50px; z-index:2" onMouseOver="startfilter(this)" onMouseOut="stopfilter(this)">

<table border=0 width=150>
<td><center>
<div class=t id="t0"  onmouseover="return s(0,'Home')" onmouseout="return s(0)"><nobr><a href="http://www.jaba1009.pe.kr" class=mi id="i0" onmouseover="startStrobe(0)" target="main">Home</a></nobr></div>
</center></td>
</table>
</div>
<div id="object2" style="position:absolute; visibility:show; left:0px; top:-50px; z-index:2" onMouseOver="startfilter(this)" onMouseOut="stopfilter(this)">
<table border=0 width=150>
<td><center>
<div class=t id="t1"  onmouseover="return s(1,'Email me')" onmouseout="return s(1)"><nobr><a href="mailto:ehanulee@netian.com" class=mi id="i1" onmouseover="startStrobe(1)">Email me</a></nobr></div>
</center></td>
</table>
</div>
<div id="object3" style="position:absolute; visibility:show; left:0px; top:-50px; z-index:2" onMouseOver="startfilter(this)" onMouseOut="stopfilter(this)">
<table border=0 width=150>
<td><center>
<div class=t id="t2"  onmouseover="return s(2,'Check mail')" onmouseout="return s(2)"><nobr><a href="http://www.hanmail.net" class=mi id="i2" onmouseover="startStrobe(2)">HanMail</a></nobr></div>
</center></td></table>
</div>
<div id="object4" style="position:absolute; visibility:show; left:0px; top:-50px; z-index:2" onMouseOver="startfilter(this)" onMouseOut="stopfilter(this)">
<table border=0 width=150>
<td><center>
<div class=t id="t3"  onmouseover="return s(3,'Microsoft')" onmouseout="return s(3)"><nobr><a href="http://www.microsoft.com" class=mi id="i3" onmouseover="startStrobe(3)">Microsoft</a></nobr></div>
</center></td>
</table>
</div>
<div id="object5" style="position:absolute; visibility:show; left:0px; top:-50px; z-index:2" onMouseOver="startfilter(this)" onMouseOut="stopfilter(this)">
<table border=0 width=150>
<td><center>
<div class=t id="t4"  onmouseover="return s(4,'Javascripts')" onmouseout="return s(4)"><nobr><a href="http://www.jaba1009.pe.kr" class=mi id="i4" onmouseover="startStrobe(4)">Jaba1009</a></nobr></div>
</center></td>
</table>
</div>
<div id="object6" style="position:absolute; visibility:show; left:0px; top:-50px; z-index:2" onMouseOver="startfilter(this)" onMouseOut="stopfilter(this)">
<table border=0 width=150>
<td><center>
<div class=t id="t5"  onmouseover="return s(5,'Lycos')" onmouseout="return s(5)"><nobr><a href="http://www.lycos.co.kr" class=mi id="i5" onmouseover="startStrobe(5)">Lycos</a></nobr></div>
</center></td>
</table>
</div>
<div id="object7" style="position:absolute; visibility:show; left:0px; top:-50px; z-index:2" onMouseOver="startfilter(this)" onMouseOut="stopfilter(this)">
<table border=0 width=150>
<td><center>
<div class=t id="t6"  onmouseover="return s(6,'Ask')" onmouseout="return s(6)"><nobr><a href="http://www.yahoo.co.kr" class=mi id="i6" onmouseover="startStrobe(6)">Yahoo!</a></nobr></div>
</center></td>
</table>
</div>
<div id="object8" style="position:absolute; visibility:show; left:0px; top:-50px; z-index:2" onMouseOver="startfilter(this)" onMouseOut="stopfilter(this)">
<table border=0 width=150>
<td><center>
<div class=t id="t7"  onmouseover="return s(7,'Yahoo')" onmouseout="return s(7)"><nobr><a href="http://www.yahoo.co.jp" class=mi id="i7" onmouseover="startStrobe(7)">Yahoo! Japan</a></nobr></div>
</center></td>
</table>
</div>
<div id="object9" style="position:absolute; visibility:show; left:0px; top:-50px; z-index:2" onMouseOver="startfilter(this)" onMouseOut="stopfilter(this)">
<table border=0 width=150>
<td><center>
<div class=t id="t8"  onmouseover="return s(8,'Excite')" onmouseout="return s(8)"><nobr><a href="http://www.excite.com" class=mi id="i8" onmouseover="startStrobe(8)">Excite</a></nobr></div>
</center></td>
</table>
</div>
</center>

</BODY>
</HTML>


소스를 분석해 본 결과 좀 효율적인 소스는 못되더군요.. 좀 오래된 소스 인듯...
filter 효과 및 글자 색상 바뀌는 부분에 변수 낭비가 심하더군요..
메뉴 같은 것은 그냥 심플하게 만드시는게 오히려 나을 것 같네요..
글쓴이 제목 최종 글
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [16] 2019.03.05 by 남기남
맹꽁이 도와주세요 [1] 2007.08.10
witch 슬라이드메뉴 관련 질문. [2] 2007.08.10
[폐]허접-_- JSP 와 MySQL 질문입니다. [2] 2007.08.10
김혜영 다른 프레임을 제어하려면..(마우스오버 잘아시는분..) [1] 2007.08.10
Naple [PHP] 세션 관련 질문 [2] 2007.08.10
Siny 이곳처럼 메뉴에 마우스 올리면 하위메뉴 나타나게 어케해여? [1] 2007.08.10
장성주 동아리 홈페이지를 만들려고 하는데요.... [3] 2007.08.10
오정호 이런 느낌의 그림은 어떻게 만드는 건가요? [3] 2007.08.10
oneside 파일 생성순으로 정렬 [1] 2007.08.10
이정환 왕초보 .. 저희 바코드클랜 게시판이 갑자기 ....  
플로나 질문입니다.부탁드립니다. [1] 2007.08.10
변해정 첨부파일을 새창으로 띄우기. [1] 2007.08.10
TryZ 객체 지향이 무언가요... [2] 2007.08.10
김명호 위의 링크사이트처럼 그림 올리면 자동으로 리사이즈 그림 게시판 만드려면... [1] 2007.08.10
김규완 이소스 분석부탁해도될까요^^꼭쓸려고 합니다 부탁^^  
Legend [re] 이소스 분석부탁해도될까요^^꼭쓸려고 합니다 부탁^^  
絶世美男 다른 사이트의 페이지를 인클루드로 다른 서버의 페이지에다가 적용시킬수가 있나요? [1] 2007.08.10
문효민 후음..매뉴가 멎대로 가는군요=_=;;  
레드엔젤 제발 도와주세요. [2] 2007.08.10
김동호 서버(계정) 사용량을 알고 싶을때는.... [1] 2007.08.10
Xynex:) 링크타겟을 잘 모르겠어요 (제로보드 최근게시물;) [1] 2007.08.10
윤태학 변수 설정에 대해서... [2] 2007.08.10
김유리 아시는분 꼭 답변 부탁드려요.. [2] 2007.08.10
구리구리 웹사이트를 ip로는 접속 불가능하게 하려면?? [1] 2007.08.10
이민종 한미르 게시판에 관한질문... [2] 2007.08.10
김성수 도트에 대한 질문 [3] 2007.08.10
지마니 위에 메뉴처럼 마우스들어가면 .. [2] 2007.08.10
김철중 HIRC로 자신의 대화방 만들기...;;;  
net@nts 컴터 상식이라고 해야하나? 궁금쓰~ [1] 2007.08.10
블루 .net 이번엔 진짜 궁금,, 한.. [2] 2007.08.10