시작

회전하고 있는 레이어를 중심으로 또다른 레이어들을 회전시키는 방법입니다. 이것을 하는 회전정보를 지정합니다.

function initCircleInCircleLoop() {

  inCircle = new Array(); 
  inCircle[0] = 10 //각 레이어들의 이동 간격시간

  outCircle = new Array();
  outCircle[0] = 10 //각 레이어들의 이동 간격시간

  if(n4) { 
    inCircle[1] = new circleInCircleSet(document.D1, -2, 100, 100, 300, 200, 3, 1, null)
    inCircle[2] = new circleInCircleSet(document.D2, -2, 100, 100, 300, 200, 3, 2, null)
    inCircle[3] = new circleInCircleSet(document.D3, -2, 100, 100, 300, 200, 3, 3, null)

    outCircle[1] = new circleInCircleSet(document.D4, 10, 50, 50, 200, 200, 3, 1, inCircle[1])
    outCircle[2] = new circleInCircleSet(document.D5, 10, 50, 50, 200, 200, 3, 2, inCircle[1])
    outCircle[3] = new circleInCircleSet(document.D6, 10, 50, 50, 200, 200, 3, 3, inCircle[1])

    outCircle[4] = new circleInCircleSet(document.D7, 10, 50, 50, 200, 200, 3, 1, inCircle[2])
    outCircle[5] = new circleInCircleSet(document.D8, 10, 50, 50, 200, 200, 3, 2, inCircle[2])
    outCircle[6] = new circleInCircleSet(document.D9, 10, 50, 50, 200, 200, 3, 3, inCircle[2])

    outCircle[7] = new circleInCircleSet(document.D10, 10, 50, 50, 200, 200, 3, 1, inCircle[3])
    outCircle[8] = new circleInCircleSet(document.D11, 10, 50, 50, 200, 200, 3, 2, inCircle[3])
    outCircle[9] = new circleInCircleSet(document.D12, 10, 50, 50, 200, 200, 3, 3, inCircle[3])
  }
  else if(e4) {
    inCircle[1] = new circleInCircleSet(document.all.D1.style, -2, 100, 100, 300, 200, 3, 1, null)
    inCircle[2] = new circleInCircleSet(document.all.D2.style, -2, 100, 100, 300, 200, 3, 2, null)
    inCircle[3] = new circleInCircleSet(document.all.D3.style, -2, 100, 100, 300, 200, 3, 3, null)

    outCircle[1] = new circleInCircleSet(document.all.D4.style, 10, 50, 50, 200, 200, 3, 1, inCircle[1])
    outCircle[2] = new circleInCircleSet(document.all.D5.style, 10, 50, 50, 200, 200, 3, 2, inCircle[1])
    outCircle[3] = new circleInCircleSet(document.all.D6.style, 10, 50, 50, 200, 200, 3, 3, inCircle[1])

    outCircle[4] = new circleInCircleSet(document.all.D7.style, 10, 50, 50, 200, 200, 3, 1, inCircle[2])
    outCircle[5] = new circleInCircleSet(document.all.D8.style, 10, 50, 50, 200, 200, 3, 2, inCircle[2])
    outCircle[6] = new circleInCircleSet(document.all.D9.style, 10, 50, 50, 200, 200, 3, 3, inCircle[2])

    outCircle[7] = new circleInCircleSet(document.all.D10.style, 10, 50, 50, 200, 200, 3, 1, inCircle[3])
    outCircle[8] = new circleInCircleSet(document.all.D11.style, 10, 50, 50, 200, 200, 3, 2, inCircle[3])
    outCircle[9] = new circleInCircleSet(document.all.D12.style, 10, 50, 50, 200, 200, 3, 3, inCircle[3])
  }
}

outCircle = new Array(); 는 외부에서 회전하는 레이어의 정보를 가지고 있습니다.
outCircle[0] = 10 는 외부레이어의 회전간격시간입니다.

여기서는 내부에 3개의 레이어를 회전시키고 3개의 레이어를 중심점으로 각기 3개의 레이어가 회전을 합니다. 위의 굵은 글자들이 내부레이어를 지정하는 것입니다. 내부 레이어에서는 필요가 없으므로 null을 지정합니다.

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

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

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

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

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

function inCircleLoop() { 

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

function outCircleLoop() { 

  for(var i=1; i < outCircle.length; i++) { 
    if(n4) {
      outCircle[i].layer.left = outCircle[i].centerX + outCircle[i].moveHol * Math.cos(outCircle[i].moveAngle*Math.PI/180) 
      outCircle[i].layer.top = outCircle[i].centerY + outCircle[i].moveVer * Math.sin(outCircle[i].moveAngle*Math.PI/180)

      outCircle[i].centerX = outCircle[i].inCircleLayer.layer.left
      outCircle[i].centerY = outCircle[i].inCircleLayer.layer.top
    }
    else if(e4) {
      outCircle[i].layer.pixelLeft = outCircle[i].centerX + outCircle[i].moveHol * Math.cos(outCircle[i].moveAngle*Math.PI/180) 
      outCircle[i].layer.pixelTop = outCircle[i].centerY + outCircle[i].moveVer * Math.sin(outCircle[i].moveAngle*Math.PI/180) 

      outCircle[i].centerX = outCircle[i].inCircleLayer.layer.pixelLeft
      outCircle[i].centerY = outCircle[i].inCircleLayer.layer.pixelTop
    }
    outCircle[i].moveAngle += outCircle[i].moveAngleIns 
  } 
  outCircleLoop_ID = setTimeout("clearTimeout(outCircleLoop_ID); outCircleLoop()", outCircle[0]); 
}

function go() {
        initCircleInCircleLoop();
        inCircleLoop(); 
	outCircleLoop()
}
--
<a href="javascript:go()">시작</a>