슬라이딩 레이어 메뉴 만들기 - 추천 > script

<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

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>

 

<table id ="layer1" style="position:absolute; visibility:visible; left:1080px; top:115px; z-index:1;"  bgcolor="#FFFFFF">
 <tr>
  <td>
   <a href="javascript:NewWindow('/site/coupon/coupon_insert.asp','coupon','400','200','no');"><img src="/images/coupon.gif" width="84" height="82" border="0"></a>
  </td>
 </tr>
</table>

<script language="javascript">
<!--
function window.onload()
{
 slideLayer("layer1", "n", "300", "10");
}
//-->
</script>