HACOSA JS STUDY#9 Animated Slideshow

setTimeout

• 일정 시간이 지난 후 함수 실행

• setTime(“function”, interval)

동작 바꾸기

• 기능 구현 방법

1. 특정 요소의 현재 위치를 파악

2. 요소가 현재 최종 위치에 와 있으면 함수 수행 완료

3. 그렇지 않으면 지정 요소를 최종 위치로 이동

4. 1번부터 다시 수행

• 함수 호출 시 받을 인수

1. 이동할 지정 요소의 ID값

2. 이동할 지정 요소의 최종 left 위치 값

3. 이동할 지정 요소의 최종 top 위치 값

4. 이동 시간

동작 바꾸기

• fucntion moveElement(eleID, final_x, final_y, interval){

if(!document.getElementById) return false;

if(!document.getElementById(eleID)) return false;

//1. 특정 요소의 현재 위치를 파악var elem = document.getElementById(eleID);

var xpos = parseInt(elem.style.left);

var ypos = parseInt(elem.style.top);

//2. 요소가 현재 최종 위치에 와 있으면 함수 수행 완료

if(xpos == final_x && ypos == final_y) return true;

//3. 그렇지 않으면 지정 요소를 최종 위치로 이동

if(xpos < final_x) xpos++;

if(xpos > final_x) xpos--;

if(ypos < final_y) ypos++;

if(ypos > final_y) ypos--;

elem.style.left = xpos + “px”;

elem.style.top = ypos + “px”;

//4. 1번부터 다시 수행

var repeat = “moveElement (‘”+eleID+“’ , “+final_x+”, “+final_y+“, “+interval+”)”;

movement = setTimeout(repeat, interval);

}

부드럽게 만들기

• 앞선 함수로는 이동시간이 오래 걸림

• 신속하게 움직이고 최종 위치에 가까워지면 천천히 움직이도록 하기

if(xpos < final_x){var dist = Math.ceil((final_x – xpos) / 10);xpos = xpos + dist;

}if(xpos > final_x) {

var dist = Math.ceil((xpos– final_x ) / 10);xpos = xpos - dist;

}if(ypos < final_y) {

var dist = Math.ceil((final_y – ypos) / 10);ypos = ypos + dist;

}if(ypos > final_y) {

var dist = Math.ceil((ypos– final_y ) / 10);ypos = ypos - dist;

}

마지막 손질

• 앞선 함수는 left, top 값이 있다는 가정 하에 작성되었으므

로, 해당 값이 없을 경우에 대한 오류 방어가 필요

• if(!elem.style.left || !elem.style.top) return false;

혹은

if(!elem.style.left) elem.style.left = “0px”;

if(!elem.style.top) elem.style.top = “0px”;

로 처리 가능

END