웹마스터 팁

  2. Support
  3. 웹마스터 팁

레이어 3 - 메뉴판때기.

2004.07.04 14:26

미친개



레이어 세번째 얘긴 클립을 이용한 메뉴판때기입니다.
좌우로 긴 레이어에 네개의 테이블을 만들어 각각의 테이블에
아이프렘을 넣고 페이지를 불러옵니다.
그리고 이 레이어에 작은 구멍을 클립 속성으로 만들어주죠.

좌우로 긴 레이어를 왔다리 갔다리 하면서 원하는 페이지를
보여주는 메뉴판때기입니다.


레이어가 이동중에 다시 같은 방향을 클릭하면 속도가 두배가
됩니다. 이걸 방지하기 위해 일종의 flag 변수인 sliding 변수를
정의해줍니다.
소스는 그다지 어렵지 않습니다.

미리 보기 : http://allzza.net/xxx/aboard.php?id=pds&dbf=12&mode=source





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>레이어 이동 - 1 </title>

<SCRIPT LANGUAGE="JavaScript">
<!--


/**************************************
제작 : 미친개
수정과 사용, 재배포에서 자유롭습니다.
학습용으로 쓰시길 권합니다.
**************************************/



sliding = false;
function slide(posi) {
    key = posi;
    if(parseInt(document.all.maddog1.style.left) >(-1)*key) slideleft();
    else slideright();
    }

function slideleft()  {
  sliding = true;
  i = parseInt(document.all.maddog1.style.left);
        if (i > key*(-1)){
                i -= 10;
                document.all.maddog1.style.left = i;
                setTimeout("slideleft()",1);
        }
else sliding = false;
}

function slideright()  {
  sliding = true;
  i = parseInt(document.all.maddog1.style.left);
        if (i < key*(-1)){
                i += 10;
                document.all.maddog1.style.left = i;
                setTimeout("slideright()",1);
        }
else sliding = false;
}


//-->
</SCRIPT>
</head>

<BODY bgcolor=#9c9c9c scroll=no>



<div id='mylayer' style='position:absolute; left:110px; top:100px; width:614; hgight=410; clip:rect(0,616,420,0);layer-background-color:#000000';>
<DIV ID="maddog1" STYLE="position:absolute; left:0px; top:0px; width:3060px; height:420px;background-color:#000000;">


<DIV ID="home" STYLE="position:absolute; left:5px; top:5px; width:600px; height:400px;">
<table border=0>
<tr>
<td align=center bgcolor=#0000ff width=610 height=405>
<iframe src=http://nzeo.com width=600 height=400 scrolling=auto></iframe>
</td>
</tr></table>
</div>


<DIV ID="pds" STYLE="position:absolute; left:615px; top:5px; width:600px; height:400px;">
<table>
<tr>
<td bgcolor=#ff00ff width=600 height=400>
<iframe src=http://allzza.net width=600 height=400 scrolling=auto></iframe>
</td>
</tr></table>
</div>



<DIV ID="mds" STYLE="position:absolute; left:1225px; top:5px; width:600px; height:400px;">
<table border=0>
<tr>
<td bgcolor=#00ffff width=600 height=400>
<iframe src=http://tagmania.net width=600 height=400 scrolling=auto></iframe>
</td>
</tr></table>
</div>



<DIV ID="js" STYLE="position:absolute; left:1835px; top:5px; width:600px; height:400px;">
<table border=0>
<tr>
<td>
<iframe src=http://naver.com width=600 height=400 scrolling=auto></iframe>
</td>
</tr></table>
</div>


<DIV ID="board" STYLE="position:absolute; left:2445px; top:5px; width:600px; height:400px;">
<table border=0>
<tr>
<td>
<iframe src=http://kr.yahoo.com width=600 height=400 scrolling=auto></iframe>
</td></tr>
</table>
</DIV>

</div>
</div>


<div style='position:absolute;left:780;top:100;width:70;height:420;visibility:visible;'>
<table border=2 width=100% height=100% bordercolor=000000>
<tr><td>
<A HREF="javascript:if(!sliding) slide(0)">엔지오</A>
</td></tr>
<tr><td>
<A HREF="javascript:if(!sliding) slide(610)">알짜넷</A>
</td></tr>
<tr><td>
<A HREF="javascript:if(!sliding) slide(1220)">태그매니아</A>
</td></tr>
<tr><td>
<A HREF="javascript:if(!sliding) slide(1830)">네이버</A>
</td></tr>
<tr><td>
<A HREF="javascript:if(!sliding) slide(2440)">야후코리아</A>
</td></tr>
</table>
</div>




</body>
</html>
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
레이어 3 - 메뉴판때기. [1] 미친개 2004.07.04
레이어 4 - 뽀나수 하나 [1] 미친개 2004.07.07
레이어 5 - 뽀나수 둘 [6] 미친개 2004.07.07
웹 문서 암호화 스크립트 [1] 미친개 2004.07.20
아이프레임으로 문서크기 자동조절하기(완벽판) [13] 렌디 2004.07.21
문서에 따른 아이프레임 heigh(높이) 값 자동 조절 (수정본) [3] 스토비━ⓒ 2004.07.31
원하는 아이프레임부분을 리로드하자! [1] †천상의燦† 2004.08.02
Javascipt로 구현한 MD5,MD4,SHA1 [10] 장종석 2004.08.06
레이어를 클릭해서 보이거나 사라지게 하기 [3] †천상의燦† 2004.08.18
이미지 사이즈에 맞게 새창띄우기 [오류보완] 정확하게 안열리는 오류 [11] beMax 2004.08.18
싸이처럼 테이블 안에서 버튼으로 이동/스크롤 하기 [5] 제로스 2004.09.09
랜디님의 iframe 크기조절 소스응용-iframe 최저길이 지정하기 [1] 김수형 2004.09.10
셀렉트 메뉴를 통해 갤러리 만들기 한현종 2004.09.10
요일마다 바뀌는 상태바 인사 말~ [2] Kasis 2004.09.13
내홈피 즐겨찾기/새로고침/앞/뒤로가기 [4] 팡이 2004.09.13
메뉴 추가 삭제 수정시 쓰면 좋을것 같네요 - 출처: http://www.happyscript.com/ [1] 예뜨락 2004.09.17
슬라이딩 메뉴 자바스크립트 [3] 행복한고니 2004.09.21
멀티 파일다운로드 꽁수로 구현하기 [1] 행복한고니 2004.10.07
웹페이지에서 단축키 사용 (Firefox) [2] 전종화 2004.10.07
자바스크립트로 구현한 윈도우 스타일.. [2] 크래닉스 2004.10.07
태그 쓰기