hacosa js study 8th
Post on 11-Jul-2015
426 Views
Preview:
TRANSCRIPT
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
top related