묻고답하기
이 소스를 수정하고 싶은데요.. 될까요?
2006.09.28 18:23
아래 소스는 예전에 엔지오에서 사용했던 스크롤 메뉴 소스입니다.(약간씩은 다르겠지만..)
이 소스뿐만 아니라, 다른 소스 모두(?) 위에서, 그리고 좌측에서 여백을 설정하여 스크롤메뉴화면의 위치를 조정하여 꾸미더군요.
제가 이때까지 본 소스들만 해도 그렇더군요..
근데, 저는 좌측은 그냥 그대로 놔 두고, 위의 여백을 설정하던 것을 아래에서부터 여백의 설정을 주어 설정하고 싶다면 어떻게 수정해줘야 할까요?
불가능한 것일까요? 아시는 분 답변 부탁 드립니다.
<html>
<head>
<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 checked(eventObj){
var imgSrc = '';
if (browser_info == 'Ie'){
imgSrc = event.srcElement;
}
else if( browser_info == "Ns6" ){
window.captureEvents(Event.CLICK);
imgSrc = eventObj;
}
else{
alert('죄송합니다. 본 브라우저에서는 지원되지 않습니다.');
return;
}
if (!pick_fixed){ //메뉴 고정이 아닌 상태
pick_fixed = true;
fixedLayer();
}
else{
pick_fixed = false;
onSlide();
}
}
//-->
</script>
</head>
<body onLoad="slideLayer('menu','v',600, 10)">
<table id="menu" style="left:0px; top:5px; width:180px; height:100px; z-index:1">
<tr><td>
<a href="#" onclick="checked(this)" align="absmiddle">레이어고정/비고정</a>
</td></tr>
</table>
<table height=1000>
<tr><td>음..</td></tr></table>
</body>
</html>
이 소스뿐만 아니라, 다른 소스 모두(?) 위에서, 그리고 좌측에서 여백을 설정하여 스크롤메뉴화면의 위치를 조정하여 꾸미더군요.
제가 이때까지 본 소스들만 해도 그렇더군요..
근데, 저는 좌측은 그냥 그대로 놔 두고, 위의 여백을 설정하던 것을 아래에서부터 여백의 설정을 주어 설정하고 싶다면 어떻게 수정해줘야 할까요?
불가능한 것일까요? 아시는 분 답변 부탁 드립니다.
<html>
<head>
<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 checked(eventObj){
var imgSrc = '';
if (browser_info == 'Ie'){
imgSrc = event.srcElement;
}
else if( browser_info == "Ns6" ){
window.captureEvents(Event.CLICK);
imgSrc = eventObj;
}
else{
alert('죄송합니다. 본 브라우저에서는 지원되지 않습니다.');
return;
}
if (!pick_fixed){ //메뉴 고정이 아닌 상태
pick_fixed = true;
fixedLayer();
}
else{
pick_fixed = false;
onSlide();
}
}
//-->
</script>
</head>
<body onLoad="slideLayer('menu','v',600, 10)">
<table id="menu" style="left:0px; top:5px; width:180px; height:100px; z-index:1">
<tr><td>
<a href="#" onclick="checked(this)" align="absmiddle">레이어고정/비고정</a>
</td></tr>
</table>
<table height=1000>
<tr><td>음..</td></tr></table>
</body>
</html>