묻고답하기

  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 남기남
킴스 win2000 도메인 설정 질문 [2] 2007.08.10
나준혁 스타일 시트가 일부분에서만 되도록...... [1] 2007.08.10
나상선 스타일 .css 적용시켯는데 [1] 2007.08.10
김지수 php로 노프레임 효과내는 방법좀... [3] 2007.08.10
장동주 APM_Setup 소개.. [4] 2007.08.10
진짜루초보 .html(.htm) 문장 사이에 삽입된 php코드 [4] 2007.08.10
박강일 다음 게시판의 종류는? [1] 2007.08.10
채성민 플래쉬 버튼 그룹질문인데요(플래쉬강좌에 라비님강좌 중질문)  
루르 php문서에 url이 있으면 자동으로 하이퍼링크 생성하는법 질문입니다. [14] 2007.08.10
stub363 답변 부탁합니다... [1] 2007.08.10
김상헌 메타태그에 관한 질문입니다.  
김기원 사진 말아올린효과에 대하여 질문입니다. [1] 2007.08.10
지환이 누가 좀 살려주세요!!!! (amdin에서 header와 footer을 이용한 원프레임 만들기) [4] 2007.08.10
이용창 일본어랑 한글을 같이 저장할려면 어떻게 해야하져??? [3] 2007.08.10
絶世美男@ XP SP2 에서 메타태그가 안먹힙니다. 방법이 없을까요? [1] 2007.08.10
경이™ 주소입력창에 한글을 입력하면 해당사이트로 이동은 어떻게? [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
태그 쓰기