/************************************************************************** 전역 변수 선언 **************************************************************************/ var layerX = 0 ; // 초기 Layer 값 - X var layerY = 0 ; // 초기 Layer 값 - Y var layer_element = null; // Slide대상 Layer var scroll_direction = ''; var inquire_interval = 1000; // 페이지가 이동한 좌표를 읽어올 간격 지정 var slide_interval = 15; // Layer가 이동할 속도 var pick_fixed = false ; // 고정상태 값 var tmr_id = null; var browser_info = ''; // Browser 객체 정보 - Netscape , IE var default_left = '940'; // 초기 왼쪽값 var default_top = '55'; // 초기 높이값 var set_type = 'C'; // 중앙정열-C, 왼쪽정열-L var set_left = '-50'; // 적용 왼쪽값 - 위치이동시에만 기입 var set_top = '-100'; // 적용 높이값 - 위치이동시에만 기입 var set_bottom = '500'; // 하단으로 부터의 간격 var quick_width = '100'; // 퀵박스의 폭값을 입력 var quick_height = '700'; // 퀵박스의 높이값을 입력 var document_end = ''; // 종료를 알리는 아이디값 var x_pos_save_temp = ''; /************************************************************************** * * Layer slide를 실행하기 위한 기본 정보를 입력받기위한 메인 함수 * * * ex : * * **************************************************************************/ function slideLayer( layer_id, end, direction) { /* 브라우저 객체 종류를 읽어온다. */ 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; } if (default_top==0) default_top = document.all[layer_id].style.top; if (default_left==0) default_left = document.all[layer_id].style.left; layer_element.visibility = 'visible' layer_element.position = 'absolute'; scroll_direction = null; // Layer 이동 방향 document_end = end; /* 초기 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; var body_width = 0; body_width = eval(parseInt(document.body.clientWidth,10)/2); nowScroll = getNowScroll(); dsize = getThisCoordi(document_end); var sheight = eval(nowScroll.Y); var swidth = eval(nowScroll.X); if (pick_fixed) return; //if(eval((document.body.clientHeight/2) + sheight) < eval(document.body.clientHeight - parseInt(default_top, 10))) if (eval((document.body.clientHeight) + sheight) < eval((document.body.clientHeight) + parseInt(default_top, 10))) { if (set_type=='C') layer_element.left = eval((parseInt(default_left, 10) / 2)+body_width - 50); else layer_element.left = default_left; layer_element.top = default_top; /* 함수 재귀호출 */ setTimeout ("onSlide()", inquire_interval); return; } if (eval((document.body.clientHeight) + sheight) == eval(dsize.top-12)) { if(set_type=='C') layer_element.left = eval((parseInt(default_left, 10) / 2)+body_width - 50); else layer_element.left = default_left; layer_element.top = eval(dsize.top-set_bottom); /* 함수 재귀호출 */ setTimeout ("onSlide()", inquire_interval); return; } /* 현재 나타나는 페이지의 x, y좌표값을 읽어온다. */ if (browser_info == 'Ie') { // Expoler 호환 버전 if(set_type=='C') page_posX = eval((parseInt(default_left,10)/2) - set_left - 50); else page_posX = eval(parseInt(default_left,10) - set_left); //page_posX = document.body.scrollLeft + layerX; page_posY = document.body.scrollTop + layerY; } else if ( browser_info == 'Ns4' || browser_info == 'Ns6' ) { // Netscape 버전 if(set_type=='C') page_posX = eval((parseInt(default_left,10)/2) - set_left - 50); else page_posX = eval(parseInt(default_left,10) - set_left); //page_posX = parseInt (window.pageXOffset, 10) + layerX; page_posY = parseInt (window.pageYOffset, 10) + layerY; } /* 현재 Layer 위치 값을 읽어온다. 전달받은 값은 'nnnnpx' 형식의 정수값이므로 */ /* 정수화 한다. */ // 왼쪽 배열일때 if(set_type=='C') layer_posX = eval((body_width + (parseInt(layer_element.left, 10)/2)) - set_left - 50); else layer_posX = eval(parseInt(layer_element.left, 10) - set_left); layer_posY = eval(parseInt(layer_element.top, 10) - set_top); /* Layer 이동이 끝난 후 다음 이동까지 간격 */ interval = inquire_interval; if (page_posX < layerX) page_posX = layerX; if (page_posY < layerY) page_posY = layerY; /* 페이지가 이동한 거리만큼 layer를 이동시킨다. */ if (set_type=='C') { if (page_posY != layer_posY || page_posX != layer_posX) { // Layer 이동이 끝 이동 거리 = 페이지가 이동 좌표 / Layer Slide 간격 slideX= Math.ceil( Math.abs((page_posX - layer_posX)-(body_width)) / 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 = eval((parseInt(default_left, 10) / 2)+body_width - 50); layer_element.top = parseInt(layer_element.top ,10) + slideY; // Layer Slide 속도 interval = slide_interval; } } else { 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; layer_element.left = parseInt(layer_element.left ,10); 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(); } } } var getNowScroll = function() { var de = document.documentElement; var b = document.body; var now = {}; now.X = document.all ? (!de.scrollLeft ? b.scrollLeft : de.scrollLeft) : (window.pageXOffset ? window.pageXOffset : window.scrollX); now.Y = document.all ? (!de.scrollTop ? b.scrollTop : de.scrollTop) : (window.pageYOffset ? window.pageYOffset : window.scrollY); return now; } function getBounds( obj ) { var ret = new Object(); if (document.all) { var rect = obj.getBoundingClientRect(); ret.left = rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft); ret.top = rect.top + (document.documentElement.scrollTop || document.body.scrollTop); ret.width = rect.right - rect.left; ret.height = rect.bottom - rect.top; } else { var box = document.getBoxObjectFor(obj); ret.left = box.x; ret.top = box.y; ret.width = box.width; ret.height = box.height; } return ret; } /** * 버튼 객체의 좌표 추출 */ function getThisCoordi(obj) { var obj = getBounds( document.getElementById(obj) ); return obj; }