계속 레이어를 회전 시키지 않고 특정한 각도로 레이어를 회전시키기 방법입니다.

먼저 계속 이동하는 레이어이동 정보를 지정하는 함수에서 이동시킬 각도를 지정하는 인자를 넣어 줍니다.

function initCircleTo() {

  circleToLayer = new Array();

  if(n4) { 
    circleToLayer[0] = 1 //각 레이어들의 이동 간격시간
    circleToLayer[1] = new circleToSet(document.D1,2,100,100,200,100,4,1,90)
  }
  else if(e4) {
    circleToLayer[0] = 1 //각 레이어들의 이동 간격시간
    circleToLayer[1] = new circleToSet(document.all.D1,2,100,100,200,100,4,1,90)
  }
}

나머지는 계속 레이어를 회전시키는 것과 같습니다. 회전 중심을 left 좌표 200px, top 좌표 100px에서 left이동폭을 100px, top이동폭을 100px로 지정각도에서 2배의 거리로 이동하라고 지정을 합니다.

그리고 이들 정보를 지정하는 함수에서 각도와 이동양을 판단하기 위한 몇 가지의 변수를 추가해 주어야 합니다.

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

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

  this.moveCircleTotal = circleTotal
  this.moveAngleFirst = 360-(360/totalLayer*layerOrder)
  this.circleStop = false

  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.style.pixelLeft = circleLeftCenter + holizontalLength * Math.cos(this.moveAngle*Math.PI/180) 
    layer.style.pixelTop = circleTopCenter + verticalLength * Math.sin(this.moveAngle*Math.PI/180) 

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

이 3가지가 계속 레이어를 이동시키는 함수에서 특정 각도만큼만 회전시키는데 필요한 추가된 것입니다.

이들 정보들을 참조하여 레이어를 이동시키는 함수입니다.

function circleTo() { 

  for(var i=1; i < circleToLayer.length; i++) { 

  if(n4) {
    if(!circleToLayer[i].circleStop) {
      circleToLayer[i].layer.left = circleToLayer[i].centerX + circleToLayer[i].moveHol * Math.cos(circleToLayer[i].moveAngle*Math.PI/180) 
      circleToLayer[i].layer.top = circleToLayer[i].centerY + circleToLayer[i].moveVer * Math.sin(circleToLayer[i].moveAngle*Math.PI/180) 

      if(circleToLayer[i].moveAngleIns < 0) {
        if(circleToLayer[i].moveAngle < circleToLayer[i].moveAngleFirst - circleToLayer[i].moveCircleTotal - circleToLayer[i].moveAngleIns) {
	  circleToLayer[i].circleStop = true; 
	  circleToLayer[i].moveAngle %=  360 
	  circleToLayer[i].moveAngleFirst = circleToLayer[i].moveAngle
	}
      }
      else {
	if(circleToLayer[i].moveAngle > circleToLayer[i].moveCircleTotal + circleToLayer[i].moveAngleFirst - circleToLayer[i].moveAngleIns ) { 
	  circleToLayer[i].circleStop = true; 
	  circleToLayer[i].moveAngle %=  360 
	  circleToLayer[i].moveAngleFirst = circleToLayer[i].moveAngle
	}
      }
      circleToLayer[i].moveAngle += circleToLayer[i].moveAngleIns 
    }
  }
  else if(e4) {
    if(!circleToLayer[i].circleStop) {
      circleToLayer[i].layer.style.pixelLeft = circleToLayer[i].centerX + circleToLayer[i].moveHol * Math.cos(circleToLayer[i].moveAngle*Math.PI/180) 
      circleToLayer[i].layer.style.pixelTop = circleToLayer[i].centerY + circleToLayer[i].moveVer * Math.sin(circleToLayer[i].moveAngle*Math.PI/180) 

      if(circleToLayer[i].moveAngleIns < 0) {
	if(circleToLayer[i].moveAngle < circleToLayer[i].moveAngleFirst - circleToLayer[i].moveCircleTotal - circleToLayer[i].moveAngleIns) {
	  circleToLayer[i].circleStop = true; 
	  circleToLayer[i].moveAngle %=  360 
	  circleToLayer[i].moveAngleFirst = circleToLayer[i].moveAngle 
	}
      }
      else {
	if(circleToLayer[i].moveAngle > circleToLayer[i].moveCircleTotal + circleToLayer[i].moveAngleFirst - circleToLayer[i].moveAngleIns ) { 
	  circleToLayer[i].circleStop = true; 
	  circleToLayer[i].moveAngle %=  360 
	  circleToLayer[i].moveAngleFirst = circleToLayer[i].moveAngle
	}
      }
      circleToLayer[i].moveAngle += circleToLayer[i].moveAngleIns 
    }
  }
 } 
 moveCircle_ID = setTimeout("clearTimeout(moveCircle_ID); circleTo()", circleToLayer[0]) 
}

function go() {
  for(var i=1; i < circleToLayer.length; i++) { 
      circleToLayer[i].circleStop = false
  }
  circleTo()
}
--
<a href="javascript:go()">실행</a>

여러 레이어 다른각도로 회전하기