예제시작


위의 4개의 레이어들은 페이지 아무데나 위치시켰습니다. 4개의 레이어를 360/4로 페이지에 위치시키고 원형으로 이동을 시킵니다. 이것은 각 레이어들의 위치를 지정하지 않고 원형으로 이동할 곳의 중심점을 지정하여서 이렇게 할 수 있습니다. 앞의 페이지에서 어떤 위치에 있는 레이어에게 원형으로 이동할 각도를 지정하는 것으로 중심점을 지정할 수 있었는데 여기서는 반대로 중심점을 지정해서 레이어들을 중심점에 맞게 위치시킵니다.

#D1 { position:absolute; left:100; top:100; width:50; }
#D2 { position:absolute; left:200; top:100; width:50; }
#D3 { position:absolute; left:300; top:100; width:50; }
#D4 { position:absolute; left:400; top:100; width:50; }

<div id="D1"><IMG SRC="../../../images/img1.gif" WIDTH=50 HEIGHT=50 BORDER=0></div>
<div id="D2"><IMG SRC="../../../images/img2.gif" WIDTH=50 HEIGHT=50 BORDER=0></div>
<div id="D3"><IMG SRC="../../../images/img3.gif" WIDTH=50 HEIGHT=50 BORDER=0></div>
<div id="D4"><IMG SRC="../../../images/img4.gif" WIDTH=50 HEIGHT=50 BORDER=0></div>

function go() {
	initCircleLoop();
	alert("시작")
	moveCircleLoop()
}

<a href="javascript:go()">예제시작</a>

function initCircleLoop() {

  circleLayer = new Array();

  if(n4) { 
    circleLayer[0] = 1 //각 레이어들의 이동 간격시간
    circleLayer[1] = new circleLoopSet(document.D1, 3, 100, 100, 200, 200, 4, 1)
    circleLayer[2] = new circleLoopSet(document.D2, 3, 100, 100, 200, 200, 4, 2)
    circleLayer[3] = new circleLoopSet(document.D3, 3, 100, 100, 200, 200, 4, 3)
    circleLayer[4] = new circleLoopSet(document.D4, 3, 100, 100, 200, 200, 4, 4)
  }
  else if(e4) {
    circleLayer[0] = 1 //각 레이어들의 이동 간격시간
    circleLayer[1] = new circleLoopSet(document.all.D1.style, 3, 100, 100, 200, 200, 4, 1)
    circleLayer[2] = new circleLoopSet(document.all.D2.style, 3, 100, 100, 200, 200, 4, 2)
    circleLayer[3] = new circleLoopSet(document.all.D3.style, 3, 100, 100, 200, 200, 4, 3)
    circleLayer[4] = new circleLoopSet(document.all.D4.style, 3, 100, 100, 200, 200, 4, 4)
  }
}

circleLoopSet(document.D1, 3, 100, 100, 200, 200, 4, 1)

위의 레이어 이동정보를 지정할 circleLoopSet에 넣어준 인자는 첫번째 인자는 이동시킬 레이어이고 두번재는 이동양, 세번째는 left이동폭, 네번재는 top이동폭, 다섯번재는 left 중심점, 여섯번째는 top 중심점, 일곱번재는 총 래이어 갯수, 마지막에는 총 래이어 갯수에서 위치시킬 레이어순서입니다.

일곱번째와 마지막의 인자는 중심점과 레이어들의 갯수와 순서로 페이지에서 위치를 지정합니다. 원형에서 같은 거리로 배치를 합니다.

function circleLoopSet(layer, angleIns, holizontalLength, verticalLength, circleLeftCenter, circleTopCenter, totalLayer, layerOrder) { 

  this.layer = layer
  this.moveHol = holizontalLength
  this.moveVer = verticalLength
  this.moveAngleIns = angleIns
  this.moveAngle = 360-(360/totalLayer*layerOrder) 

  if(n4) { 
    layer.left = circleLeftCenter + holizontalLength * Math.cos(this.moveAngle*Math.PI/180)
    layer.top = circleTopCenter + verticalLength * Math.sin(this.moveAngle*Math.PI/180)

    this.centerX = layer.left - holizontalLength * Math.cos(this.moveAngle*Math.PI/180) 
    this.centerY = layer.top - verticalLength * Math.sin(this.moveAngle*Math.PI/180) 
  }
  else if(e4) {
    layer.pixelLeft = circleLeftCenter + holizontalLength * Math.cos(this.moveAngle*Math.PI/180) 
    layer.pixelTop = circleTopCenter + verticalLength * Math.sin(this.moveAngle*Math.PI/180) 

    this.centerX = layer.pixelLeft - holizontalLength * Math.cos(this.moveAngle*Math.PI/180) 
    this.centerY = layer.pixelTop - verticalLength * Math.sin(this.moveAngle*Math.PI/180) 
  }
}

이것으로 페이지에서의 원형으로 이동시 각 레이어의 위치에 상관없이 중심점을 지정하는 것으로 원형으로 여러 레이어를 배치할 수 있습니다. 이것은 페이지에서 다른 원형효과와 연계하기도 편리합니다. 즉, 이동중인 레이어의 중심점을 옮기면 원형으로 이동중인 레이어들이 그 중심점으로 이동합니다. 여러 효과를 설계시 좀 더 쉽게 설계할 수 있습니다.

두번째 인자인 angleIns는 레이어가 이동할 방향입니다. 양수값은 시계방향으로 이동하고 음수값은 반시계 방향으로 이동합니다. 세번째 holizontalLength와 네번째 verticalLength는 원형의 크기입니다. 두개의 값이 같으면 원형이고 다르면 타원형으로 이동합니다.

이제 이렇게 좌표와 정보를 지정한 레이어들을 이동시키는 함수를 호출합니다.

function moveCircleLoop() { 

  for(var i=1; i < circleLayer.length; i++) { 
    if(n4) {
      circleLayer[i].layer.left = circleLayer[i].centerX + circleLayer[i].moveHol * Math.cos(circleLayer[i].moveAngle*Math.PI/180) 
      circleLayer[i].layer.top = circleLayer[i].centerY + circleLayer[i].moveVer * Math.sin(circleLayer[i].moveAngle*Math.PI/180)
    }
    else if(e4) {
      circleLayer[i].layer.pixelLeft = circleLayer[i].centerX + circleLayer[i].moveHol * Math.cos(circleLayer[i].moveAngle*Math.PI/180) 
      circleLayer[i].layer.pixelTop = circleLayer[i].centerY + circleLayer[i].moveVer * Math.sin(circleLayer[i].moveAngle*Math.PI/180) 
    }
    circleLayer[i].moveAngle += circleLayer[i].moveAngleIns 
  } 
  moveCircleLoop_ID = setTimeout("clearTimeout(moveCircleLoop_ID); moveCircleLoop()", circleLayer[0]); 
}

<script>
function moveCenter() {
	for(var i=1; i < circleLayer.length; i++) { 
		circleLayer[i].centerX += 100
	}
}
--
<a href="javascript:moveCenter()">중심점 좌표 왼쪽으로 100px 더 이동시키기</a>
</script>

중심점 좌표 왼쪽으로 100px 더 이동시키기

위의 링크를 누르고 돌고있는 레이어들을 보면 중심점이 오른쪽으로 100px이동 되어있습니다.

추가예제

추가예제2