| <!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
| <html>
|
| <head>
|
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
| <title></title>
|
| <style>
|
| body{
|
| font-size:9pt;
|
| }
|
|
|
| #panel{
|
| width:600px;
|
| height:300px;
|
| border:1px solid #999;
|
| position:relative;
|
| }
|
|
|
| #panel #image_view{
|
| left:236px;
|
| top:80px;
|
| width:128px;
|
| height:128px;
|
| border:1px solid #999;
|
| position:relative;
|
| overflow:hidden;
|
| }
|
|
|
| #nav{
|
| text-align:center;
|
| width:600px;
|
| }
|
| </style>
|
|
|
| <script>
|
| var objimage_view;
|
| var nImageScrollHeight; // 전체 이미지 스크롤 높이값을 담을 변수.
|
| var nCurrentY; // 현재 스크롤 위치값.
|
|
|
| var nTimerID;
|
| var nStep; // 한번에 이동하게 될 이동값.
|
|
|
| window.onload=function(){
|
| objimage_view = document.getElementById("image_view");
|
|
|
| // 전체 이미지 스크롤 높이값 구하기.
|
| nImageScrollHeight = objimage_view.scrollHeight;
|
| nImageScrollHeight -=objimage_view.offsetHeight;
|
|
|
| nStep = 2;
|
| nTimerID = 0;
|
| nCurrentY = 0;
|
| // 이벤트초기화.
|
| // 스크롤 시작버튼 이벤트 리스너 등록.
|
| document.getElementById("btn_start").addEventListener("click",function(){
|
| if(nTimerID==0){
|
| nTimerID = setInterval(startMove,20);
|
| }
|
| if(nTimerID==3){
|
| alert("setInterval 3번 호출?");
|
|
|
| }
|
|
|
| alert(nTimerID);
|
| },false);
|
|
|
| // 스크롤 멈춤버튼 이벤트 리스너 등록.
|
| document.getElementById("btn_stop").addEventListener("click",function(){
|
| if(nTimerID!=0){
|
| alert(nTimerID);
|
| clearInterval(nTimerID);
|
| nTimerID = 0;
|
| }
|
| },false);
|
| }
|
|
|
| // 이미지를 상하로 스크롤 시키는 함수.
|
| function startMove(){
|
| nCurrentY += nStep;
|
|
|
| // 현재 스크롤 위치가 마지막 위치인지 판단하기.
|
| if( nCurrentY> nImageScrollHeight){
|
| nCurrentY = nImageScrollHeight;
|
| nStep = -2;
|
| }
|
|
|
| // 현재 스크롤 위치가 시작 위치인지 판단하기.
|
| if(nCurrentY<0){
|
| nCurrentY = 0;
|
| nStep = 2;
|
| }
|
|
|
| // scrollTop프로퍼티를 이용한 이미지 스크롤 시키기.
|
| objimage_view.scrollTop=nCurrentY;
|
| }
|
|
|
|
|
| </script>
|
| </head>
|
| <body>
|
| <div>
|
| <h4>#image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요.</h4>
|
| <div id="panel">
|
| <div id="image_view">
|
| <img src="images/img1.jpg">
|
| <img src="images/img2.jpg">
|
| <img src="images/img3.jpg">
|
| <img src="images/img4.jpg">
|
| <img src="images/img5.jpg">
|
| <img src="images/img6.jpg">
|
| <img src="images/img7.jpg">
|
| <img src="images/img8.jpg">
|
| <img src="images/img9.jpg">
|
| </div>
|
| </div>
|
| <div id="nav">
|
| <button id="btn_start">시작</button>
|
| <button id="btn_stop">멈춤</button>
|
| </div>
|
| </div>
|
| </body>
|
| </html>
|
|
images.zip