★ jQuery 이벤트 이벤트 전용 함수 가독성, 편리함 a. obj.test() : getter > 읽기 b. obj.test(param) : setter > 쓰기 jQuery('#btn3').click(function(){ alert('jQuery'); }); 이벤트 범용 함수 구문 길다.(불편함) a. obj.test(param) : getter > 읽기 b. obj.test(param, param) : setter > 쓰기 // b. 이벤트 범용 함수 jQuery('#btn4').on('click', function(){ alert('jQuery'); }); ■ mouseover, mouseout 이벤트 전용 함수 jQuery('#btn3').mouseover(function(){ // alert..
★ 고양이 잡기 게임 5개의 단계에 거쳐 나타나는 고양이를 포획하는 게임 ■ HTML 코드 Catch Cat Ready ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
★ 이동하는 고양이를 잡기 이동하는 고양이를 클릭하여 포착하기 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
★ 다량의 선 애니메이션 해당 선을 커서를 대면 선의 곡율 처럼 효과 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
★ 셀 클릭 애니메이션 셀을 클릭하였을 때, 애니메이션 처리 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
★ 이미지 뷰어 이미지 뷰어를 구현. ▷/|| 버튼을 누르면 시작/멈춤을 제어. 1초마다 순차적으로 이미지가 변경. 특정 버튼을 눌러 이미지를 변경한다. 자동 실행 중 특정 버튼을 누르면 타이머는 중단되고 누른 이미지가 출력된다. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
★ 사람 애니메이션 사람을 걷게 한다. 첫번째 사람 : 그냥 걷는다. 두번째 사람 : 누르면 앞으로 간다. 세번째 사람 : 누르면 걷기 시작하고, 다시 누르면 앞으로 간다. 네번째 사람 : 왔다 갔다 걷는다. 이미지 전체 크기 : 512 x 256 / 한 장면 크기 : 128 x 128 ■ HTML 코드 걷기 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
★ 새를 이용한 애니메이션 새를 날게 함. 이미지 전체 크기 : 800 x 140 / 한 장면 크기 : 200 x 140 ■ HTML 코드 새 날개짓 새의 속도 : 느림 보통 빠름 엄청빠름 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
