이미지를 x축 이동시키기

물고기 움직이기

이번 예제는 jquery로 이미지의 위치를 제어하는 방법을 담은 예제입니다. 예제의 조건은 다음과 같습니다.

1. 물고기를 수평선 위에서 (왼쪽으로 이동)버튼을 누르면 왼쪽으로, (오른쪽으로 이동)버튼을 누르면 오른쪽으로 이동하게 한다.
2. 키보드의 ←버튼을 누르면 왼쪽으로 20px, →버튼을 누르면 오른쪽으로 20px이동한다..
3. 수평선은 width: 300px; height: 2px; background-color: red;
   물고기는 position: relative; width:40px;이다.
   물고기 사진의 src주소는 https://t1.daumcdn.net/cfile/tistory/2637484856B21E3332

아래는 예제를 완성시킨 모습입니다.

오른쪽 왼쪽 키보드로도 제어 가능!

이 예제의 코드

        <style>

        #pannel{}

        #bar22{ width: 300px; height: 2px; background-color: red;}

        #fish3{ position: relative; width:40px;}

        #dropingSelection{ width: 300px; height: 300px;}

        </style>

        <div id="pannel">

            <div id="dropingSelection">  </div>

          <img src="https://t1.daumcdn.net/cfile/tistory/2637484856B21E3332" alt="물고기!" id="fish3">

          <div id="bar22"></div>

        </div>

        <div>

          <button id="btnBack">물고기 왼쪽</button><button id="btnStart22">물고기 오른쪽</button><br /><input type="button" name="name" value="여기를 누르고">오른쪽 왼쪽 키보드로도 제어 가능!

        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

        <script>

        var position = 0;

        $(document).ready(function() {

          $('#btnStart22').click(function(event) {

            $('#fish3').animate({left:240}, 1000);

            position = 240;

          });

          $('#btnBack').click(function(event) {

            $('#fish3').animate({left:0}, 1000);

            position = 0;

          });

        });

        function moving3(){

          var keycode = event.keyCode;

          var fish3 = document.getElementById('fish3');

          if(keycode == 39 && position<240){

            position+=20;

          }else if(keycode == 37 && position>0) {

            position-=20;

          }

          console.log(position);

          fish3.style.left=position.toString()+"px";

        }

        </script>