다운로드 파일에는 예제파일과 소스파일을 압축하여 놓았습니다. 아래는 설명부분입니다.
각 버튼을 클릭하면 화면이 미끄러지듯이 화면이 바뀌면서 이미지가 보여집니다.
이미지와 그림과 같이 출력되는 글자 나오는 부분은 아이프레임 태그로 불러들여지는 또 다른 HTML 문서입니다.
예제에서는 편의상, 아이프레임 안에 들어가는 문서는 contents.html 이라하고, 버튼이 들어가는 문서는
demo_sliding.html 이라고 이름 붙이겠습니다.
먼저, contents.html 과 demo_sliding.html 이라는 이름으로 새 HTML문서 두개를 만들어 둡니다.
먼저 아이프레임 안에 들어가는 문서인 contents.html을 만들어 보도록 합니다.
--------------------------------------------------------------------------------
1.contents.html 의 <body>와 </body> 사이에 아래와 같은 테이블 하나를 만듭니다.
--------------------------------------------------------------------------------
<table width="2500" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="500"><img src="img/img1.jpg" align="left"> - 이미지1</td>
<td width="500"><img src="img/img2.jpg" align="left"> - 이미지2</td>
<td width="500"><img src="img/img3.jpg" align="left"> - 이미지3</td>
<td width="500"><img src="img/img4.jpg" align="left"> - 이미지4</td>
<td width="500"><img src="img/img5.jpg" align="left"> - 이미지5</td>
</tr>
</table>
--------------------------------------------------------------------------------
테이블 한칸의 가로크기를 500으로 설정하였습니다. 총 5개의 칸으로 구성하였습니다.
즉,500x5=2500 의 테이블 가로크기가 되는 것입니다.
가로크기 500은 아이프레임 가로크기에 맞춰서 화면에 보여지는 이미지의 가로 크기를
설정한 것입니다.
[☞ contents.html을 다 만들면 옆으로 긴 테이블의 문서가 만들어 집니다.]
이제 버튼에 해당하는 문서 demo_sliding.html 문서를 만들어 보겠습니다.
--------------------------------------------------------------------------------
2. demo_sliding.html 문서안의 <head>와 </head>사이에 아래 자바스크립트 소스를 삽입합니다.
--------------------------------------------------------------------------------
<script language="JavaScript">
<!--
var x = 0;
var dest = 0;
var distance = 0;
var step = 0;
var destination = 0;
function scrollit(destination) {
step = 1; //스크롤속도와 관계: 숫자가 클수록 속도 빠름
dest = destination;
if (x<dest) {
while (x<dest) {
step += (step / 50); //스크롤속도와 관계: 숫자가 클수록 속도 느림
x += step;
this.frames.iscrollx.scroll(x,0);
}
this.frames.iscrollx.scroll(dest,0);
x = dest;
}
if (x > dest) {
while (x>dest) {
step += (step / 50); //스크롤속도와 관계: 숫자가 클수록 속도 느림
if(x >= (0+step))
{
x -= step;
this.frames.iscrollx.scroll(x,0);
}
else { break; }
}
if(dest >= 0) { this.frames.iscrollx.scroll(dest,0); }
x = dest;
}
if (x<1) {x=1}
if (x>3000) {x=2500} // 3000 이라고 써진 부분에는 'contents.html 의 테이블의 폭 + contents.html 의 셀 한개의 폭' 을 적어주시면 됩니다.
} // contents.html 의 테이블의 폭은 2500 이었고 셀 한개당 폭이 500이었으므로 [2500+500=3000]
//-->
</script>
--------------------------------------------------------------------------------
위 소스 내용중에 숫자로 되어있는 2, 50 ,50은 각각 스크롤속도와 관계가 있습니다.
2는 큰 수일수록 빠르고, 50이라고 써진 부분은 좌우측 이미지가 스크롤될 때의 속도를 각각 설정하는 부분이고, 나누어지는 값이기 때문에 숫자가 큰 수일록 속도가 느립니다.
iscrollx 는 버튼을 클릭했을 때 어떤 프레임의 화면을 스크롤 시킬까를 정해주는 부분입니다. 여기서는 잠시 후에 아이프레임의 이름을 iscrollx 라고 할 것이므로 저렇게 붙였습니다.
3000 이라고 쓰여진 부분에는 'contents.html 문서안에 만들어진 테이블의 전체 가로폭 + 'contents.html 문서안에 만들어진 테이블 한칸의 폭' 을 적어주시면 됩니다.
contents.html 문서안에 만들어진 테이블의 전체 가로폭은 2500 이었고, 테이블 한 칸의 가로크기가 500 이었으므로
[2500 + 500 = 3000 ] 입니다.
2500 은 앞에서 contents.html 문서안에 만들어진 테이블의 전체 가로폭과 같은 수치를 적어주시면 됩니다.
--------------------------------------------------------------------------------
3. demo_sliding.html 의 <body>와 </body>사이에 아래처럼 아이프레임과 버튼을 만듭니다.
--------------------------------------------------------------------------------
<iframe src="contents.html" frameborder="0" name="iscrollx" width="500" height="200" marginwidth="0" marginheight="0" scrolling="no"></iframe> <br>
<a href='javascript:scrollit(0);'>이미지1</a>
<a href='javascript:scrollit(500);'>이미지2</a>
<a href='javascript:scrollit(1000);'>이미지3</a>
<a href='javascript:scrollit(1500);'>이미지4</a>
<a href='javascript:scrollit(2000);'>이미지5</a>
--------------------------------------------------------------------------------
아이프레임 가로크기를 contents.html 문서안에 만들어둔 테이블 한개의 가로폭(500픽셀)과 맞추어서 500픽셀로
설정하고, 세로크기를 이미지가 완전히 보이도록 정도의 크기(여기서는 200픽셀로 설정)를 설정하였습니다.
아! 그리고, 아이프레임으로 출력되는 문서의 경로는 상대경로로 지정하셔야 자바스크립트 오류없이 실행이 됩니다.
절대경로로 해보니까. 오류가 나더군요...^^;
이제, demo_sliding.html 문서를 실행하여서 각각의 [이미지] 버튼을 클릭하여서 확인해보세요...^^
[☞ demo_sliding.html 문서를 클릭하셔서 확인해보세요]
|
