IT & CODE 이야기

SetInterval과 clearInterval 활용 예제 본문

CODE/JQuery

SetInterval과 clearInterval 활용 예제

Karoid 2016. 2. 17. 12:00


갤러리 배열

이번 예제는 jquery로 setInterval 함수와 clearInterval 함수를 연습하기 위한 예제입니다

  1. 시작 버튼을 누르면 물고기가 바 위에서 좌우로 이동하면서 움직인다.
  2. 물고기의 머리는 항상 이동하는 방향을 향한다.
  3. 멈춤 버튼을 누르면 물고기가 멈춘다.
  4. 멈춤 버튼을 눌렀다가 시작 버튼을 누르면 이전 움직이던 방향 그대로 다시 물고기가 움직인다.
  5. 물고기가 멈췄을때 리소스 절약을 위해 setInterval 함수가 해제되어야 한다
  6. #bar{ width: 500px; height: 10px; background-color: red;}
    #fish{ position: relative; width:80px; transform:rotateY(180deg);}
    물고기 src : https://t1.daumcdn.net/cfile/tistory/2637484856B21E3332
    물고기는 300px의 거리를 왔다갔다 한다
  7. 참고할 예제: 2016/02/07 - [CODE/JQuery] - 이미지를 x축 이동시키기

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

물고기!


'CODE > JQuery' 카테고리의 다른 글

.charAt 예제  (0) 2016.02.20
Math 클래스 예제(물고기 잡기 게임)  (2) 2016.02.19
갤러리를 배열하기  (0) 2016.02.11
animate() 예제 (물고기 움직이기)  (0) 2016.02.08
이미지를 x축 이동시키기  (0) 2016.02.07
Comments