묻고답하기

  2. Support
  3. 묻고답하기

자동 스크롤 서브메뉴

2004.09.23 11:31

Crom

홈페이지를 만들면서 좌측 서브메뉴를 스크롤 바를 내림에 따라
자동으로 아래로 스크롤 되는 자바 스크립 소스를 구해서 적용했습니다
그런데 정렬에 있어 좌표가 안맞는 관계로
항상 좌측 위에 위치하고 있는 문제가 생겼습니다.
초기 위치가 위에서 부터 약 360픽셀정도 떨어진 아래쪽에 있어야 하는데
왠만한 수치를 고쳐도 변화가 없거나 에러가 나네요

자동 스크롤 레이어 초기 위치를 아래로 약 360픽셀 가량 내려서 정렬 시키려면
어떻게 해야 하나요?

아래가 제가 자바스크립 소스 게시판에서 가져온 소스입니다.



<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title> 제목 없음</title>
<meta name="GENERATOR" content="Namo WebEditor v5.0">
<meta name="description" content="스타일이 전혀 적용되지 않은 새 문서 양식을 만듭니다.">
<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>
<script language="JavaScript">
<!--
function na_restore_img_src(name, nsdoc)
{
  var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
  if (name == '')
    return;
  if (img && img.altsrc) {
    img.src    = img.altsrc;
    img.altsrc = null;
  }
}

function na_preload_img()
{
  var img_list = na_preload_img.arguments;
  if (document.preloadlist == null)
    document.preloadlist = new Array();
  var top = document.preloadlist.length;
  for (var i=0; i < img_list.length; i++) {
    document.preloadlist[top+i]     = new Image;
    document.preloadlist[top+i].src = img_list[i+1];
  }
}

function na_change_img_src(name, nsdoc, rpath, preload)
{
  var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
  if (name == '')
    return;
  if (img) {
    img.altsrc = img.src;
    img.src    = rpath;
  }
}

// -->
</script>
</head>
<body onLoad="slideLayer('layer1', 'n', '300', '10');na_preload_img(false, 'image/b_sub_greeting_on.gif', 'image/b_sub_cafe_intro_on.gif', '+ 'image/b_sub_staff_intro_on.gif', 'image/b_sub_cafe_map_on.gif');">
<!--------------------------// Slide Layer -------------------------->
<table id ="layer1" style="position:absolute; visibility:visible; left:15px; top:15px; z-index:1;">
<tr><td>
  <!--------------------------// Menu Layer -------------------------->

메뉴에 들어갈 내용
<!--------------------------// Slide Layer 고정을 위한 Form -------------------------->
     <form name="form1"><input type="checkbox" name="layer2" id="layer2" onClick="checkFixed('layer2')" onfocus="this.blur()">Layer 고정</form>
    <!-------------------------- Menu Layer //-------------------------->
</td></tr></table>
<!-------------------------- Slide Layer //-------------------------->
</body>
</html>
이 게시물을
좋아요
목록
글쓴이 제목 최종 글
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [16] 2019.03.05 by 남기남
경이™ 주소입력창에 한글을 입력하면 해당사이트로 이동은 어떻게? [1] 2007.08.10
나상선 텍스트 css 질문 [1] 2007.08.10
이글e 특정키를 누르면 지정한 페이지로 이동하는 소스.. [1] 2007.08.10
이상훈 자바스크립트 오류중에...divMenu를 정의할 수 없습니다. 라고 나오는데요...  
zzoong2 선그리기...??  
Crom 자동 스크롤 서브메뉴  
일개미 soap라는 프로토콜(?)을 구할수있나요?  
i1ovesoony 일러 // 크기 변형 어떻게 해결하나요? [2] 2007.08.10
i1ovesoony 일러스트레이터 cs // rounded rectangle 모서리 각도 조절을 어떻게 하나요? [2] 2007.08.10
나상선 웹메일 질문입니다  
이정희 제가 뭘 잘 몰라서요.......... [1] 2007.08.10
이은효 드림 mx 간단질문이요 ㅜㅡㅜ [3] 2007.08.10
방랑시인 php로 mysql계정주는 프로그램..  
푸른하늘 이메일 외부로그인에 대해 알고 싶습니다 [1] 2007.08.10
이상무 헤더와 푸더 나눠주실분? [3] 2007.08.10
겜방 동영상 재생할 때, 버퍼링되도록 하는 방법 아시는 분? [2] 2007.08.10
알까 자바스크립트에 일반적인 링크 <a href="링크주소"> 걸고 싶어요 [1] 2007.08.10
정호영 웹 갤러리에서 이미지를 전체화면으로 하는 방법 없나요? [1] 2007.08.10
고건영 아이프레임 링크시! [1] 2007.08.10
박지원 c언어 질문이요..초보라서.... [1] 2007.08.10
박재현 서브 메뉴 만들기 동영상 질문입니다..  
오진호 번호 랜덤 추첨 소스도 만들수 있나요?  
이광철 원 프레임 홈페이지  
류기원 자바스크립트<음악> 에대해서.. 가르쳐주세요  
박재현 태그소스 질문이에요-_ㅠ [3] 2007.08.10
홍순근 엄청나게 많이 뜨는 팝업창을 막을 수는 없나요? [1] 2007.08.10
free 링크타겟질문 [2] 2007.08.10
Hugh sql에서 테이블 생성 날짜 알아보기  
박재현 태그소스 질문입니다....... [1] 2007.08.10
한정헌 웹폰트 설치문의...  
태그 쓰기