IT & CODE 이야기

이번 예제는 jquery로 수족관속의 물고기를 움직이는 예제입니다. 예제의 조건은 다음과 같습니다. xy좌표를 입력하면 입력 버튼을 누르면 물고기가 좌표로 움직인다. 물고기를 누르면 랜덤한 위치로 이동한다. 물고기가 수족관 밖으로 나가는 좌표를 입력하면 경고창을 띄운다. 키보드 화살표를 이용해서 물고기를 10px씩 이동시킨다. 물고기 src:http://cfile6.uf.tistory.com/image/2637484856B21E3332B223 물고기 width:200px; position:relative; 수족관 width:700px; height:442px; border:2px solid grey; margin:auto; if문 ,Math.random, .animate를 알아야 합니다. 아래는 예제를 ..

물고기 움직이기 이번 예제는 jquery로 이미지의 위치를 제어하는 방법을 담은 예제입니다. 예제의 조건은 다음과 같습니다. 물고기를 수평선 위에서 (왼쪽으로 이동)버튼을 누르면 왼쪽으로, (오른쪽으로 이동)버튼을 누르면 오른쪽으로 이동하게 한다. 키보드의 ←버튼을 누르면 왼쪽으로 20px, →버튼을 누르면 오른쪽으로 20px이동한다.. 수평선은 width: 300px; height: 2px; background-color: red; 물고기는 position: relative; width:40px;이다. 물고기 사진의 src주소는 http://cfile6.uf.tistory.com/image/2637484856B21E3332B223 아래는 예제를 완성시킨 모습입니다. 물고기 왼쪽물고기 오른쪽 오른쪽 왼쪽..