웹마스터 팁

  2. Support
  3. 웹마스터 팁

슬라이딩 Layer ( 옆에 메뉴 보이시죠, 비슷꾸리한거 )

2003.02.26 18:46

이남두

하이홈이나 다른 사이트에서 보면 하단에 광고창을 고정하여 페이지 스크롤에도 따라 다니게 되어 있는 걸 봤습니다.
http://java.up2.co.kr/exam/java93.htm <- 에 있는 소스를 인용하고 우연히 여기에 게시판에 steelheart님이 올린 소스를
보았지요. 그 소스와 혼합해서 한 번 만들어 봤는데요,  Netscape및  IE에서 다 Test해 보았습니다. 단지 고정할 경우
Netscape 4.0 버전에서는 제 방식으로는 지원되지 않습니다.
방법은 Java Script를 이용한 Cookie값을 만들어 사용하는 경우가 있는 데 Netscape가 7.0이 나온 이상 별로 사용하지 않을 거
같아서 안했습니다. ^^ 다른 방법은 checkFixed 함수를 적당한 방법으로 수정해도 됩니다.
예를 들면
checkFixed(){
  if (document.forms['form'].layer2.checked){
  }
  else{
  }
}
이런 방법으로 ^^;;
나머지는 대충 제가 주석을 달아 놓았으니 적당히 구미에 맞게 수정하시면 될 듯 싶네요...
예제 : http://spolite.com.ne.kr/slide.html
================== 여기서 부터 소스 입니다 =====================

1. Javascript 소스 부분

<script language= "JavaScript">
<!-- //
/**************************************************************************
  전역 변수 선언
**************************************************************************/
var layerX = 0 ;              // 초기 Layer 값 - X
var layerY = 0 ;              // 초기 Layer 값 - Y
var layer_element = null;  // Slide대상 Layer

var scroll_direction = '';
var inquire_interval = 300; // 페이지가 이동한 좌표를 읽어올 간격 지정
var slide_interval = 5;       // Layer가 이동할 속도

var pick_fixed = false ;    // 고정상태 값
var tmr_id = null;

var browser_info = '';       // Browser 객체 정보 - Netscape , IE
/**************************************************************************
*
*  Layer slide를 실행하기 위한 기본 정보를 입력받기위한 메인 함수
*
*  repeat : h - 좌우 이동만 허용, v - 상하 이동만 허용, null - 모두 허용
*
*  ex :  
*        <body onLoad = slideLayer( 'slidemenu', 'v','600','10') >
*
**************************************************************************/
function slideLayer( layer_id, direction, inquire, slide ){

  /*  브라우저 객체 종류를 읽어온다. */
   if( (navigator.appName == 'Netscape') &&
       parseInt(navigator.appVersion,10) <= 4 ){
       //netscape 4.0 이하 Browser
       browser_info = 'Ns4' ;  // Browser 객체 종류
       // Netcape 4.0 이하 버전에서 대상 Element 읽어오기
       layer_element = document.layers[layer_id];
   }
   else if( (navigator.appName == 'Netscape') &&
             parseInt(navigator.appVersion,10) > 4 ){
       //netscape 6.0 이상 Browser
       browser_info = 'Ns6' ;
       // netscape 6.0 이상 버전에서 대상 Element 읽어오기
       layer_element = document.getElementById(layer_id);
       layer_element = layer_element.style;  // Style 속성만 읽어온다.
  }
  else{
       // Explore 호환 Browser
       browser_info = 'Ie' ;
       //  대상 Element 읽어오기
       layer_element = document.all[layer_id].style;
  }

  layer_element.visibility = 'visible'
   layer_element.position = 'absolute';
  inquire_interval  = parseInt(inquire,10);  // Layer 이동 간격
  slide_interval    = parseInt(slide,10);     // Layer 이동 속도
  scroll_direction = direction.toLowerCase();   // Layer 이동 방향

  /* 초기 Layer의 위치값을 전역변수에 대입한다.                               */
  /* Layer위치를 고정하거나 또는 페이지가 스크롤될 경우 Layer이동시  */
  /* 페이지에서 Layer 위치를 상대적으로 변경하기 위함                       */
  layerX = parseInt(layer_element.left, 10);
  layerY = parseInt(layer_element.top, 10);
    
  onSlide();
}

/**************************************************************************
  현재 브라우저의 페이지 위치 값을 읽어와 대상 객체를 움직인 좌표만큼
이동한다.
**************************************************************************/
function onSlide(){
    var page_posX, page_posY, layer_posX, layer_posY;
    var slideX = 0, slideY = 0;
    var interval = 0;
    
    if (pick_fixed) return;

    /* 현재 나타나는 페이지의 x, y좌표값을 읽어온다. */
    if ( browser_info == 'Ie'){ // Expoler 호환 버전
       page_posX = document.body.scrollLeft  + layerX;
       page_posY = document.body.scrollTop  + layerY;
    }
    else if( browser_info == 'Ns4' || browser_info == 'Ns6' ){ // Netscape 버전
       page_posX = parseInt (window.pageXOffset, 10) + layerX;
       page_posY = parseInt (window.pageYOffset, 10) + layerY;
    }

    /* 현재 Layer 위치 값을 읽어온다. 전달받은 값은 'nnnnpx' 형식의 정수값이므로 */
    /* 정수화 한다.                                                                                        */
    layer_posX = parseInt(layer_element.left, 10);
    layer_posY = parseInt(layer_element.top, 10);

    /* Layer 이동이 끝난 후 다음 이동까지 간격 */
    interval = inquire_interval;

    if (page_posX < layerX) page_posX = layerX;
    if (page_posY < layerY) page_posY = layerY;

    /* 페이지가 이동한 거리만큼 layer를 이동시킨다.    */
    if (page_posY != layer_posY || page_posX != layer_posX) {
      // Layer 이동이 끝 이동 거리 =  페이지가 이동 좌표 /  Layer Slide 간격
      slideX= Math.ceil( Math.abs(page_posX - layer_posX) / slide_interval );
      slideY = Math.ceil( Math.abs(page_posY - layer_posY) / slide_interval );

    
      if (page_posX < layer_posX)  slideX = -slideX;
      if (page_posY < layer_posY)  slideY = -slideY;

      if( scroll_direction != 'v') // Slide방향이 양측 또는 좌우 방향일때
          layer_element.left = parseInt(layer_element.left,10)   + slideX;

      if( scroll_direction != 'h')// Slide방향이 양측 또는 상하 방향일때
          layer_element.top = parseInt(layer_element.top ,10)  + slideY ;

       // Layer Slide 속도
      interval = slide_interval;
   }

   /* 함수 재귀호출 */
   setTimeout ("onSlide()", interval);
}

/**************************************************************************
   Layer를 고정시키기 위한 함수
**************************************************************************/
function fixedLayer(){

    var page_posX, page_posY, layer_posX, layer_posY;
    var slideX = 0, slideY = 0;
    /* 현재 Layer 위치 값을 읽어온다. */
    layer_posX = parseInt(layer_element.left, 10);
    layer_posY = parseInt(layer_element.top, 10);

    /* Layer의 초기 위치로 이동시키기 위해 초기 Layer값을 Page 좌표값으로 대입한다.*/  
    page_posX = layerX;
    page_posY = layerY;

    /* Layer가 이동한 거리만큼 계산하여 메뉴를 이동시킨다.  */
    if (page_posY != layer_posY || page_posX != layer_posX) {
        slideX= Math.ceil( Math.abs(page_posX - layer_posX) / slide_interval );
        slideY = Math.ceil( Math.abs(page_posY - layer_posY) / slide_interval );

        if (page_posX < layer_posX)  slideX = -slideX;
        if (page_posY < layer_posY)  slideY = -slideY;

        layer_element.left = parseInt(layer_element.left,10)    + slideX;
        layer_element.top = parseInt(layer_element.top ,10)  + slideY ;

      setTimeout (" fixedLayer()", slide_interval);
   }
  
}

/**************************************************************************
   Layer 고정 값 확인
**************************************************************************/
function checkFixed(obj_id){

   if ( browser_info == 'Ie' ){ // Expoler 호환 버전
       //  대상 Element 읽어오기
       var theObject = document.all[obj_id];
   }
   else if (browser_info == 'Ns6' ){
       var theObject = document.getElementById(obj_id);
   }
   else if (browser_info == 'Ns4' ){
      alert('죄송합니다. 현재 브라우저는 지원되지 않습니다.')
      // 위 형식으로는 지원 안됨 ~.~
      return;
   }

   /* 객체의 Type이 checkbox인지 확인 한다. */
   if ( theObject.type == 'checkbox' ){
      if ( (!theObject.checked) && (pick_fixed) ){  // Layer 이동
          pick_fixed = false;
          onSlide();
      }
      else if ( (theObject.checked) && (!pick_fixed) ){ // Layer 고정
          pick_fixed = true;
          fixedLayer();
     }      
  }

}
//-->
</script>

2. HTML Body 부분

<body bgcolor="#B3C5D2" onLoad="slideLayer('layer1', 'n', '300', '10')">
<!--------------------------// Slide Layer -------------------------->
<table id ="layer1" style="position:absolute; visibility:visible; left:15px; top:15px; z-index:1; border:black 2px solid">
<tr><td>
  <!--------------------------// Menu Layer -------------------------->
  <table width="200" cellspacing="10" cellpadding="0" style="font-weight:bold; font-family:serif-serf; font-size:9pt; color:#FFFFFF">
     <tr><td height="20"> </td></tr>
     <tr><td height="20" bgcolor="#336699">  Menu1</td></tr>
     <tr><td height="20" bgcolor="#336699">  Menu2</td></tr>
     <tr><td height="20" bgcolor="#336699">  Menu3</td></tr>
     <tr><td height="20" bgcolor="#336699">  Menu4</td></tr>
     <tr><td height="20" bgcolor="#336699">  Menu5</td></tr>
     <tr><td height="20" bgcolor="#336699">
     <!--------------------------// Slide Layer 고정을 위한 Form -------------------------->
     <form name="form1"><input type="checkbox" name="layer2" id="layer2" onClick="checkFixed('layer2')" onfocus="this.blur()">Layer 고정</form>
     <!-------------------------- Slide Layer 고정을 위한 Form 고정 -------------------------->
     </td></tr>
     </table>
    <!-------------------------- Menu Layer //-------------------------->
</td></tr></table>
<!-------------------------- Slide Layer //-------------------------->
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
주민등록번호를 받아 자동으로 폼에 생일, 성별 체크해주기 [4] jugug 2003.03.06
자바스크립트로 만든 로또추첨기~ ^^ 행복한고니 2003.03.05
다음 로그인 폼 입니다... 로그인후 원하는 곳으로!! [3] 정성교 2003.03.05
허접하나마... 플래쉬와 동영상 받는 소스... [2] 꽃ちゃん 2003.03.04
자바스크립트로 쪼물딱 거리는 배경 이미지 [3] 미친개 2003.03.02
즐겨찾기 추가하기 [3] file 라엘 2003.03.01
슬라이딩 Layer ( 옆에 메뉴 보이시죠, 비슷꾸리한거 ) [8] 이남두 2003.02.26
두군데 IFRAME 위치에 내용 동시출력하기-프레임에도 가능 [4] 깜보 2003.02.22
MS홈에 쓰이는 오른쪽메뉴 툴바 [13] file Kortion 2003.02.22
개판 오분전 이미지 슬라이더 [5] 미친개 2003.02.20
통합 검색엔진 소스입니다. [5] 철혈단 2003.02.19
폰트 크기를 방문자가 자유자재로 바꾸도록.. 깜보 2003.02.19
개판 오분전 select menu......... [10] 미친개 2003.02.18
[수정 및 추가 설명] 음악 듣기 소스 [4] 당근당근 2003.02.17
페이지 로딩중 효과 [7] 깜보 2003.02.16
[수정판] 갤러리 이미지 드레그 이동 가능한 필터 사용 스르륵 버젼 ^^ [10] 모라미 2003.02.15
요청해오신 레이어 무조건 중앙에 열리기 와 클릭하는 곳에 열리기 두가지 소스입니다. [4] 모라미 2003.02.25
레이어를 이용한 초간단 갤러리를 만들어봅시다. [6] 모라미 2003.02.15
흐르는 내용 강좌 [4] 라엘 2003.02.10
[허뎝이즈]간단한 테트리스 만들어 보기^_^[허뎝이 수정했음돠] [11] 허졉이즈 2003.02.06
태그 쓰기