One to one Example

레이어를 연속적으로 이동해야 할 때가 있습니다. 여러개의 레이어에 이미지를 넣고 차례로 이동하면 아주 새로운 느낌이 듭니다.

이런 것을 하기 위해서 각 레이어당 최종적으로 위치할 좌표에 까지 setTimeout()를 넣고 사용합니다. 보낼곳까지 setTimeout()로 약간씩 이동시키는 것입니다.

사용한 코드에서 처럼 먼저 이동하는 D1 레이어를 다 이동시키고 다음 D2레이어를 이동시키는 함수를 부릅니다. 이렇게 사용할 수 있지만, 이것은 좋은 방법이 되지 못합니다. 왜냐하면 이동시킬 레이어가 여러개라면 코드가 엄청 길어지고 여러 레이어를 순서와 속도등 다른 효과를 내는데는 수정하기가 불편합니다.

즉, 다른 작업을 할때 만든 코드를 재사용할 수 없습니다. 필요한 코드를 미리 만들어 놓고 입력하는 인자로 여러 레이어를 다룰 수 있다면 사용하기 쉽고 재사용할 수 있습니다.

n4 = (document.layers)?true:false;
e4 = (document.all)?true:false;
function moveD1() {
	if(n4) {
		if(document.D1.left < 500) {
			document.D1.left += 10;
			setTimeout("moveD1()", 10)
		}
		else moveD2()
	}
	else if(e4) {
		if(document.all.D1.style.pixelLeft < 500) {
			document.all.D1.style.pixelLeft += 10;
			setTimeout("moveD1()", 10)
		}
		else moveD2()
	}
}
function moveD2() {
	if(n4) {
		if(document.D2.left < 500) {
			document.D2.left += 10;
			setTimeout("moveD2()", 10)
		}
	}
	else if(e4) {
		if(document.all.D2.style.pixelLeft < 500) {
			document.all.D2.style.pixelLeft += 10;
			setTimeout("moveD2()", 10)
		}
	}
}
</script>
</head>
<body>
<div id=D1><img src="../../images/img1.gif"></div>
<div id=D2><img src="../../images/img2.gif"></div>
<a href="javascript:moveD1()">예제시작