IT & CODE 이야기

갤러리 배열 이번 예제는 jquery로 이미지를 제어하는 방법을 담은 예제입니다. 예제의 조건은 다음과 같습니다. 이미지들을 100*100 px의 크기로 x간격, y간격으로 배열한다 x간격, y간격, 1줄의 이미지 갯수를 input태그로 받아서 버튼을 누르면 그대로 나타나게 한다. 키보드의 +버튼과 -버튼을 누르면 이미지가 추가되었다가 제거되었다가 하게 한다. 아래는 예제를 완성시킨 모습입니다. 이 예제의 코드 갤러리 배열 +버튼으로 이미지 추가, -버튼으로 이미지 제거 x간격: y간격: 1줄에 이미지 갯수:

이번 예제는 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 아래는 예제를 완성시킨 모습입니다. 물고기 왼쪽물고기 오른쪽 오른쪽 왼쪽..