웹마스터 팁
슬라이딩 Layer ( 옆에 메뉴 보이시죠, 비슷꾸리한거 )
2003.02.26 18:46
하이홈이나 다른 사이트에서 보면 하단에 광고창을 고정하여 페이지 스크롤에도 따라 다니게 되어 있는 걸 봤습니다.
http://java.up2.co.kr/exam/java93.htm <- 에 있는 소스를 인용하고 우연히 여기에 게시판에 steelheart님이 올린 소스를
보았지요. 그 소스와 혼합해서 한 번 만들어 봤는데요, Netscape및 IE에서 다 Test해 보았습니다. 단지 고정할 경우
Netscape 4.0 버전에서는 제 방식으로는 지원되지 않습니다.
방법은 Java Script를 이용한 Cookie값을 만들어 사용하는 경우가 있는 데 Netscape가 7.0이 나온 이상 별로 사용하지 않을 거
같아서 안했습니다. ^^ 다른 방법은 checkFixed 함수를 적당한 방법으로 수정해도 됩니다.
예를 들면
checkFixed(){
if (document.forms['form'].layer2.checked){
}
else{
}
}
이런 방법으로 ^^;;
나머지는 대충 제가 주석을 달아 놓았으니 적당히 구미에 맞게 수정하시면 될 듯 싶네요...
예제 : http://spolite.com.ne.kr/slide.html
================== 여기서 부터 소스 입니다 =====================
1. Javascript 소스 부분
<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>
2. HTML Body 부분
<body bgcolor="#B3C5D2" onLoad="slideLayer('layer1', 'n', '300', '10')">
<!--------------------------// Slide Layer -------------------------->
<table id ="layer1" style="position:absolute; visibility:visible; left:15px; top:15px; z-index:1; border:black 2px solid">
<tr><td>
<!--------------------------// Menu Layer -------------------------->
<table width="200" cellspacing="10" cellpadding="0" style="font-weight:bold; font-family:serif-serf; font-size:9pt; color:#FFFFFF">
<tr><td height="20"> </td></tr>
<tr><td height="20" bgcolor="#336699"> Menu1</td></tr>
<tr><td height="20" bgcolor="#336699"> Menu2</td></tr>
<tr><td height="20" bgcolor="#336699"> Menu3</td></tr>
<tr><td height="20" bgcolor="#336699"> Menu4</td></tr>
<tr><td height="20" bgcolor="#336699"> Menu5</td></tr>
<tr><td height="20" bgcolor="#336699">
<!--------------------------// Slide Layer 고정을 위한 Form -------------------------->
<form name="form1"><input type="checkbox" name="layer2" id="layer2" onClick="checkFixed('layer2')" onfocus="this.blur()">Layer 고정</form>
<!-------------------------- Slide Layer 고정을 위한 Form 고정 -------------------------->
</td></tr>
</table>
<!-------------------------- Menu Layer //-------------------------->
</td></tr></table>
<!-------------------------- Slide Layer //-------------------------->
http://java.up2.co.kr/exam/java93.htm <- 에 있는 소스를 인용하고 우연히 여기에 게시판에 steelheart님이 올린 소스를
보았지요. 그 소스와 혼합해서 한 번 만들어 봤는데요, Netscape및 IE에서 다 Test해 보았습니다. 단지 고정할 경우
Netscape 4.0 버전에서는 제 방식으로는 지원되지 않습니다.
방법은 Java Script를 이용한 Cookie값을 만들어 사용하는 경우가 있는 데 Netscape가 7.0이 나온 이상 별로 사용하지 않을 거
같아서 안했습니다. ^^ 다른 방법은 checkFixed 함수를 적당한 방법으로 수정해도 됩니다.
예를 들면
checkFixed(){
if (document.forms['form'].layer2.checked){
}
else{
}
}
이런 방법으로 ^^;;
나머지는 대충 제가 주석을 달아 놓았으니 적당히 구미에 맞게 수정하시면 될 듯 싶네요...
예제 : http://spolite.com.ne.kr/slide.html
================== 여기서 부터 소스 입니다 =====================
1. Javascript 소스 부분
<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>
2. HTML Body 부분
<body bgcolor="#B3C5D2" onLoad="slideLayer('layer1', 'n', '300', '10')">
<!--------------------------// Slide Layer -------------------------->
<table id ="layer1" style="position:absolute; visibility:visible; left:15px; top:15px; z-index:1; border:black 2px solid">
<tr><td>
<!--------------------------// Menu Layer -------------------------->
<table width="200" cellspacing="10" cellpadding="0" style="font-weight:bold; font-family:serif-serf; font-size:9pt; color:#FFFFFF">
<tr><td height="20"> </td></tr>
<tr><td height="20" bgcolor="#336699"> Menu1</td></tr>
<tr><td height="20" bgcolor="#336699"> Menu2</td></tr>
<tr><td height="20" bgcolor="#336699"> Menu3</td></tr>
<tr><td height="20" bgcolor="#336699"> Menu4</td></tr>
<tr><td height="20" bgcolor="#336699"> Menu5</td></tr>
<tr><td height="20" bgcolor="#336699">
<!--------------------------// Slide Layer 고정을 위한 Form -------------------------->
<form name="form1"><input type="checkbox" name="layer2" id="layer2" onClick="checkFixed('layer2')" onfocus="this.blur()">Layer 고정</form>
<!-------------------------- Slide Layer 고정을 위한 Form 고정 -------------------------->
</td></tr>
</table>
<!-------------------------- Menu Layer //-------------------------->
</td></tr></table>
<!-------------------------- Slide Layer //-------------------------->
댓글 8
-
송광일
2003.03.24 16:05
-
☺쇠구슬
2003.02.26 22:41
이 소스 다른 곳에서도 많이 본 소스지만. 주석을 참 상세히 달아놓으셨네요..^^
추천한방 누루고 갑니다.. -
우울한
2003.02.26 23:31
z-index:↑ 요함.. -
るろうに劍心
2003.02.26 23:35
웅.. 이걸 써보았는데요,
메인페이지에서는 슬라이딩이 잘 되거든요?
그런데, 헤더와 푸터로 나누고 제로보드를 넣은곳에서는 슬라이딩이 되질 않아요..ㅠ_ㅠ -
Junori
2003.03.04 18:44
사용해본 결과 헤더 푸터 적용 페이지에서는 제로보드의 영향을 받아 함수 인식이 안되는 듯... -
백주헌
2003.03.03 22:48
강츄 한방-_-// -
김채린
2003.03.08 19:53
으악 ㅜ0ㅜ;;; 너무 어려워요 흑... 어쨌든 상세한 설명이라도 감사합니다.! -
티다
2004.01.27 21:12
유나에 강추.
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
APM에서 XE 설치시 깨짐현상 발생될때...
 | 비밀M | 2013.05.14 |
| 파일박스 사용에 관하여 [2] | wooildang | 2013.04.26 |
| 이미지 리사이즈 적용이 안되는 경우 [4] | 아고라 | 2009.06.30 |
|
[수정] CSS, JS 파일 gzip로 한꺼번에 압축해서 전송하기
[20]
| SCAC | 2011.09.02 |
| 모바일에서 댓글 자동 펼치기 (스킨:스케치북5모바일) [2] | 준스타일 | 2013.05.03 |
| array 함수와 in_array함수 이용한 시간 체크 | 똑디 | 2013.05.03 |
|
상담용 게시판 - 확장 변수 이용
[4]
| 어라얼랑 | 2012.06.23 |
| XE를 위한 DEBUG 이야기 [3] | 우진홈 | 2013.04.30 |
| xe 속도 엄청 빨라집니다. [4] | 투투투쓰리 | 2013.03.12 |
| 최근게시물에 움직이는 GIF 불러오기 | SuP | 2013.04.25 |
| 개인서버나 호스팅운영하실분들 참고하세요 [6] | 데브위트™ | 2012.06.19 |
| 간단한 PHP 문법 [204] | zero | 2000.03.06 |
| XE 1.5.X , 1.7.X 용 nginx rewrite [4] | Root | 2013.03.24 |
| 메뉴에 새글 표시 모듈이 작동하지 않은 문제 해결 [2] | 샹하이 | 2013.04.15 |
|
meta_add 애드온 수정.(1.7.3 버전에 맞게..)
[4]
| 투씨 | 2013.04.01 |
| 메인화면에 플래시 쉽게 삽입하는 방법.. [12] | 청개구리00 | 2008.08.30 |
| 스팸공동대응 api 모듈 지우기 [1] | SCAC | 2012.08.12 |
| xe1.7.3.1 으로의 업데이트시 팝업모듈 오류 수정내역 [1] | 날마다좋은날 | 2013.04.12 |
| 제로보드 xe 게시판 가로 푹 줄이기 방법좀 알려주세요. [1] | 산업일꾼 | 2013.04.14 |
|
아이콘샵(v0.4) 관리자페이지 디자인수정파일(1.7.x 용)
| 카이네드 | 2013.04.13 |
위에 것은 픽셀로 고정을 시키던데..