<html>
<head>
<title>Untitled</title>
<style>
.ex {position:absolute;top:200px;left:0px}
</style>

<script language="JavaScript">

var i=0
aa=null;
bb=null;

function move() {
  //왼쪽에서 오른쪽으로 이동합니다.
  clearTimeout(bb)   //현재 왼쪽으로 이동중이라면 그 기능을 해지합니다.
  if ((document.body.clientWidth)-100>i) {  //브라우져 크기보다 100 작을때까지 조건을 체크
    i=parseInt(document.all["layer1"].style.posLeft) ; //현재의 위치를 구합니다.
    document.all["layer1"].style.posLeft=i+10 ;  //현재 위치에 10을 더합니다.
             //여기서 작은 값을 주면 더 스므드하게 이동하고(천천히) 큰값을 주면 빨리 이동합니다.
    aa = setTimeout ("move()",1)
    //1000분에 1초마다 다시 실행합니다.
  }else{
    clearTimeout(aa)
    // 끝에 이르면 반복실행을  중지합니다.
  }
}

function move2() {
  //왼쪽으로 이동하게 하는 함수입니다.
  clearTimeout(aa)
  if (10 < i) {
    i=parseInt(document.all["layer1"].style.posLeft) ;
    document.all["layer1"].style.posLeft=i-10 ;
    bb = setTimeout ("move2()",1) ;
  }else{
    clearTimeout(bb)
    // 끝에 이르면 반복실행을  중지합니다.
  }
}

</script>
</head>

<body>
<a href="javascript:move()">왼쪽에서 오른쪽으로 이동</a> <br>
<p>&nbsp;</p>
<a href="javascript:move2()">오른쪽에서 왼쪽으로 이동</a>
<div id="layer1" class="ex"><img src="animal.gif"></div>

</body>
</html>

이 게시물을