//---------------------------------------------- // 레이어를 마음대로 이동 시키는 자바스크립트 // 출처 : http://microbians.com //---------------------------------------------- 1.dynlayer.js 와 glide.js를 헤드 사이에 추가한다.
| <SCRIPT language=JavaScript src="dynlayer.js"></SCRIPT> <SCRIPT language=JavaScript src="glide.js"></SCRIPT> |
| 형식 : dynlayer레어어명 = new DynLayer("보디에서 지정한 아이디") 보디 사이에 <div id=test>본문에 지정하는 부분입니다</div> 처럼 test를 아이디로 지정했다면 dyn_test = new DynLayer("test") 와 같이 지정 function init(){ loaderz = new DynLayer("loading")//로딩 레이어 셋 //움직이고 싶은 레이어는 반드시 DynLayer로 지정한다. ftmenu = new DynLayer("tmenu") ftsmenu = new DynLayer("tsmenu") fsmenu1 = new DynLayer("smenu1") fsmenu2 = new DynLayer("smenu2") fsmenu3 = new DynLayer("smenu3") fsmenu4 = new DynLayer("smenu4") loaderz.hide();//로딩후 로딩 레이어 숨기기 animate_identity();//초기 애니메이션 함수 } |
| 일단 이동 형식 : init에서 지정한 dynlayer아이디.glideTo('fast','slow',x축 좌표,y축 좌표,fast속도,slow속도) 이단 이동 형식 : init에서 지정한 dynlayer아이디.glideTo('fast','slow',x축 좌표,y축 좌표,fast속도,slow속도,'fbmenu.glideTo("fast", "slow",x축 좌표,y축 좌표,fast속도,slow속도);') function animate_identity() { ftmenu.glideTo('fast','slow',0,-30,10,15,'ftmenu.glideTo("fast", "slow",0,0,2,15);')//top메뉴 함수 ftsmenu.glideTo('fast','slow',100,40,3,7,'ftsmenu.glideTo("fast", "slow",50,40,3,10);')//top서브 메뉴 함수 } |
| function 마음대로(매개변수) { if(매개변수==1){ init에서 지정한 dynlayer아이디.glideTo('fast','slow',x축 좌표,y축 좌표,fast속도,slow속도) } if(매개변수==2){ init에서 지정한 dynlayer아이디.glideTo('fast','slow',x축 좌표,y축 좌표,fast속도,slow속도) } else{ init에서 지정한 dynlayer아이디.glideTo('fast','slow',x축 좌표,y축 좌표,fast속도,slow속도) } } function show(no) { ftsmenu.glideTo('fast','slow',50,-100,10,7) if((no==1)) { fsmenu1.glideTo('fast','slow',40,41,10,7) fsmenu2.glideTo('fast','slow',-300,41,5,5) fsmenu3.glideTo('fast','slow',-300,41,5,5) fsmenu4.glideTo('fast','slow',-300,41,5,5) } if((no==2)) { fsmenu2.glideTo('fast','slow',40,41,10,7) fsmenu1.glideTo('fast','slow',-300,41,5,5) fsmenu3.glideTo('fast','slow',-300,41,5,5) fsmenu4.glideTo('fast','slow',-300,41,5,5) } if((no==3)) { fsmenu3.glideTo('fast','slow',40,41,10,7) fsmenu1.glideTo('fast','slow',-300,41,5,5) fsmenu2.glideTo('fast','slow',-300,41,5,5) fsmenu4.glideTo('fast','slow',-300,41,5,5) } if((no==4)) { fsmenu4.glideTo('fast','slow',40,41,10,7) fsmenu1.glideTo('fast','slow',-300,41,10,5) fsmenu2.glideTo('fast','slow',-300,41,10,5) fsmenu3.glideTo('fast','slow',-300,41,10,5) } } |
| <body onload=init()> |
| <div id=보디아이디 style="Z-INDEX: z인덱스깊이; left:x축좌표;WIDTH:넓이; POSITION: absolute; top:y축좌표; HEIGHT:높이;"> 내용 </div> <!-- 로딩 레이어는 반드시 지정해야한다. --> <DIV id=loading style="Z-INDEX: 100; LEFT: 0px; WIDTH: 800px; POSITION: absolute; TOP: 0px; HEIGHT: 42px"> <FONT face=verdana size=1><BR> l o a d i n g . . .</FONT> </DIV> <!-- top 본 메뉴--> <div id=tmenu style="Z-INDEX: 2; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: -300px; HEIGHT:50;"> <table height=100% width=100% cellpadding="0" cellspacing="0" border="0" bgcolor=4a4a4a> <tr> <td class=white> 초기에 움직이는 레이어:</td> <td><div class=white onclick='javascript:show(1);' onfocus='this.blur()' style=mouse-cusor:hand>메뉴</div></td> <td><div class=white onclick='javascript:show(2);' onfocus='this.blur()' style=mouse-course:hand>메뉴</div></td> <td><div class=white onclick='javascript:show(3);' onfocus='this.blur()' style=mouse-course:hand>메뉴</div></td> <td><div class=white onclick='javascript:show(4);' onfocus='this.blur()' style=mouse-course:hand>메뉴</div></td> </tr> </table> </div> ....................... 이런 식으로 원하는 만큼 레이어를 만듭니다. |
| 형식:onclick='javascript:마음대로(매개변수);'//'마음대로'는 4번 메뉴를 이용해 만든 함수 <a href='#' onclick='javascript:show(1);' onfocus='this.blur()'>메뉴</a> |