1
2
3
4
5
6
7
8
9
10
지정위치로 이동후 원형이동 go to 원형으로 이동

추가예제



레이어 원형으로 실행하기에서 중심점을 지정해서 원형으로 회전시킬 레이어들을 중심점을 기준으로 배치할 수 있습니다. 그래서, 처음 각 레이어들을 <div style="left:..; top:.." 로 위치를 아무데나 지정해도 순식간에 중심점을 기준으로 이동하고 회전을 합니다. 이 페이지는 처음 위치에서 중심점을 기준으로 원형으로 회전하기 전에 그 위치로 이동을 시키고 회전을 시작합니다. 단순히 이동하는 과정을 보여주는 페이지입니다.

이것을 하기 위해서 처음 레이어를 배치할 때 각 배치된 좌표로 사선으로 이동하기를 합니다. 사선으로 이동하기를 참조하세요.

이동시킬 레이어들입니다. 

<div id="D1">1</div><div id="D2">2</div><div id="D3">3</div>
<div id="D4">4</div><div id="D5">5</div><div id="D6">6</div>
<div id="D7">7</div><div id="D8">8</div><div id="D9">9</div>
<div id="D10">10</div>
지정한 style입니다. 
#D1 { position:absolute; left:0; top:0; width:20; height:20; clip:rect(0,20,20,0); background-color:red; layer-background-color:red;}
#D2 { position:absolute; left:0; top:0; width:20; height:20; clip:rect(0,20,20,0); background-color:aqua; layer-background-color:aqua;}
#D3 { position:absolute; left:0; top:0; width:20; height:20; clip:rect(0,20,20,0); background-color:aqua; layer-background-color:aqua;}
#D4 { position:absolute; left:0; top:0; width:20; height:20; clip:rect(0,20,20,0); background-color:aqua; layer-background-color:aqua;}
#D5 { position:absolute; left:0; top:0; width:20; height:20; clip:rect(0,20,20,0); background-color:aqua; layer-background-color:aqua;}
#D6 { position:absolute; left:0; top:0; width:20; height:20; clip:rect(0,20,20,0); background-color:aqua; layer-background-color:aqua;}
#D7 { position:absolute; left:0; top:0; width:20; height:20; clip:rect(0,20,20,0); background-color:aqua; layer-background-color:aqua;}
#D8 { position:absolute; left:0; top:0; width:20; height:20; clip:rect(0,20,20,0); background-color:aqua; layer-background-color:aqua;}
#D9 { position:absolute; left:0; top:0; width:20; height:20; clip:rect(0,20,20,0); background-color:aqua; layer-background-color:aqua;}
#D10 { position:absolute; left:0; top:0; width:20; height:20; clip:rect(0,20,20,0); background-color:aqua; layer-background-color:aqua;}
이들 레이어를 이동정보로 지정하기 위해서 아래로 지정합니다. 
function initShiftToCircleLoop() {

  shiftToCircleLayer = new Array();

  if(n4) { 
    shiftToCircleLayer[0] = 1 //각 레이어들의 이동 간격시간
    shiftToCircleLayer[1] = new shiftToCircleLoopSet(document.D1, 5, 100, 100, 200, 200, 10, 1, 3)
    shiftToCircleLayer[2] = new shiftToCircleLoopSet(document.D2, 5, 100, 100, 200, 200, 10, 2, 3)
    shiftToCircleLayer[3] = new shiftToCircleLoopSet(document.D3, 5, 100, 100, 200, 200, 10, 3, 3)
    shiftToCircleLayer[4] = new shiftToCircleLoopSet(document.D4, 5, 100, 100, 200, 200, 10, 4, 3)
    shiftToCircleLayer[5] = new shiftToCircleLoopSet(document.D5, 5, 100, 100, 200, 200, 10, 5, 3)
    shiftToCircleLayer[6] = new shiftToCircleLoopSet(document.D6, 5, 100, 100, 200, 200, 10, 6, 3)
    shiftToCircleLayer[7] = new shiftToCircleLoopSet(document.D7, 5, 100, 100, 200, 200, 10, 7, 3)
    shiftToCircleLayer[8] = new shiftToCircleLoopSet(document.D8, 5, 100, 100, 200, 200, 10, 8, 3)
    shiftToCircleLayer[9] = new shiftToCircleLoopSet(document.D9, 5, 100, 100, 200, 200, 10, 9, 3)
    shiftToCircleLayer[10] = new shiftToCircleLoopSet(document.D10, 5, 100, 100, 200, 200, 10, 10, 3)
  }
  else if(e4) {
    shiftToCircleLayer[0] = 1 //각 레이어들의 이동 간격시간
    shiftToCircleLayer[1] = new shiftToCircleLoopSet(document.all.D1, 5, 100, 100, 200, 200, 10, 1, 3)
    shiftToCircleLayer[2] = new shiftToCircleLoopSet(document.all.D2, 5, 100, 100, 200, 200, 10, 2, 3)
    shiftToCircleLayer[3] = new shiftToCircleLoopSet(document.all.D3, 5, 100, 100, 200, 200, 10, 3, 3)
    shiftToCircleLayer[4] = new shiftToCircleLoopSet(document.all.D4, 5, 100, 100, 200, 200, 10, 4, 3)
    shiftToCircleLayer[5] = new shiftToCircleLoopSet(document.all.D5, 5, 100, 100, 200, 200, 10, 5, 3)
    shiftToCircleLayer[6] = new shiftToCircleLoopSet(document.all.D6, 5, 100, 100, 200, 200, 10, 6, 3)
    shiftToCircleLayer[7] = new shiftToCircleLoopSet(document.all.D7, 5, 100, 100, 200, 200, 10, 7, 3)
    shiftToCircleLayer[8] = new shiftToCircleLoopSet(document.all.D8, 5, 100, 100, 200, 200, 10, 8, 3)
    shiftToCircleLayer[9] = new shiftToCircleLoopSet(document.all.D9, 5, 100, 100, 200, 200, 10, 9, 3)
    shiftToCircleLayer[10] = new shiftToCircleLoopSet(document.all.D10, 5, 100, 100, 200, 200, 10, 10, 3)
  }
}
여기서 추가한 인자는 맨 끝의 3입니다. 사선으로 이동할 때 각 레이어들의 한번 이동양입니다. shiftToCircleLoopSet()으로 회전이동 정보를 지정한 레이어를 사선이동 정보로 참조하기 위해서 같은 함수 shiftToCircleLoopSet()를 사용하고 shiftToCircleLoopSet()에 사선이동 정보를 지정하는 함수를 넣어줍니다. 아래는 shiftToCircleLoopSet() 함수입니다. 
function shiftToCircleLoopSet(layer, angleIns, holizontalLength, verticalLength, circleLeftCenter, circleTopCenter, totalLayer, layerOrder, shift) { 
	//shift : 사선이동양
  this.layer = layer
  this.moveHol = holizontalLength
  this.moveVer = verticalLength
  this.moveAngleIns = angleIns
  this.moveAngle = 360-(360/totalLayer*layerOrder) 
	
  this.leftTo = Math.floor(circleLeftCenter + holizontalLength * Math.cos(this.moveAngle*Math.PI/180) )
  this.topTo = Math.floor(circleTopCenter + verticalLength * Math.sin(this.moveAngle*Math.PI/180) )

  this.centerX = this.leftTo - holizontalLength * Math.cos(this.moveAngle*Math.PI/180) 
  this.centerY = this.topTo - verticalLength * Math.sin(this.moveAngle*Math.PI/180) 

  this.oblLayer = new obliqueSet(this.layer, this.leftTo, this.topTo, shift) 
}
로 사선이동 정보를 회전이동 정보의 하부 인자로 지정을 합니다. 회전이동정보를 가지고 있는 shiftToCircleLayer 아래에 oblLayer가 있습니다. 그래서 사선이동 정보를 제어하기 위해서는 shiftToCircleLayer[각 레이어인자 정수].oblLayer 로 사용할 수 있습니다.

this.leftTo, this.topTo은 사선으로 보낼 원형이동에서 처음 위치입니다. 이곳까지 사선으로 보냅니다. 사선이동 정보를 지정하는 obliqueSet()입니다. 

function obliqueInfo(layer, leftTo, topTo, leftOrTop) { 
     //레이어의 이동양을 1이하의 숫자로 나누어 반환함. 
	var bitL=bitT=null
	var flagLeft=flagTop=1

	if(n4) {
		bitL = leftTo-layer.left
		bitT = topTo-layer.top
	}
	else if(e4) {
		bitL = leftTo-layer.style.pixelLeft
		bitT = topTo-layer.style.pixelTop
	}

	if(bitL <0) flagLeft = -1
	if(bitT <0) flagTop = -1

	bitL = Math.abs(bitL)
	bitT = Math.abs(bitT)

	if(bitL > bitT) { bitT /= bitL; bitL /= bitL; }
	else { bitL /= bitT; bitT /= bitT; } 

	if(leftOrTop == "left") return bitL*flagLeft
	else if(leftOrTop == "top") return bitT*flagTop
	else if(leftOrTop == "leftFlag") return flagLeft
	else if(leftOrTop == "topFlag") return flagTop
}
function obliqueSet(layer, leftTo, topTo, shift) { 
	this.layer=layer
	this.leftBit=obliqueInfo(layer, leftTo, topTo, "left")
	this.topBit=obliqueInfo(layer, leftTo, topTo, "top")
	this.leftFlag=obliqueInfo(layer, leftTo, topTo, "leftFlag") 
	this.topFlag=obliqueInfo(layer, leftTo, topTo, "topFlag") 

	this.moveLeftTo = leftTo
	this.moveTopTo = topTo
	this.leftMoved = false
	this.topMoved = false
	this.moveLeftBit = this.leftBit * shift 
	this.moveTopBit = this.topBit * shift

	this.overOneLeft=0 
	this.overOneTop=0
}
left, top의 좌표만 있으면 사선이동과 같습니다. 특정 좌표로 사선이동을 하는 것입니다. 그리고 먼저 지정한 위치로 사선으로 이동을 시키는 moveOblique()를 실행합니다. moveOblique() 함수입니다. 
obliqueLeftMoved=obliqueTopMoved=1 
 //moveOblique()함수에서 사선으로 이동하는 레이어들의 이동종료를 확인함. 
function moveOblique() { 
  if(n4) { 
    var i=1, tempL=tempT=0
    for( ; i < shiftToCircleLayer.length; i++ ) { 
      shiftToCircleLayer[i].oblLayer.overOneLeft += shiftToCircleLayer[i].oblLayer.moveLeftBit
      shiftToCircleLayer[i].oblLayer.overOneTop += shiftToCircleLayer[i].oblLayer.moveTopBit

      tempL = Math.floor(shiftToCircleLayer[i].oblLayer.overOneLeft) 
      tempT = Math.floor(shiftToCircleLayer[i].oblLayer.overOneTop) 

      shiftToCircleLayer[i].oblLayer.overOneLeft -= tempL
      shiftToCircleLayer[i].oblLayer.overOneTop -= tempT

      if( shiftToCircleLayer[i].oblLayer.layer.left < shiftToCircleLayer[i].oblLayer.moveLeftTo - (tempL*shiftToCircleLayer[i].oblLayer.leftFlag)) { 
	shiftToCircleLayer[i].oblLayer.layer.left += tempL
      }
      else if( shiftToCircleLayer[i].oblLayer.layer.left < shiftToCircleLayer[i].oblLayer.moveLeftTo) { 
	while( shiftToCircleLayer[i].oblLayer.layer.left > shiftToCircleLayer[i].oblLayer.moveLeftTo - tempL ) 
	    tempL--
	shiftToCircleLayer[i].oblLayer.layer.left += tempL
      }

      else if( shiftToCircleLayer[i].oblLayer.layer.left > shiftToCircleLayer[i].oblLayer.moveLeftTo + (tempL*shiftToCircleLayer[i].oblLayer.leftFlag)) { 
	shiftToCircleLayer[i].oblLayer.layer.left += tempL
      }
      else if( shiftToCircleLayer[i].oblLayer.layer.left > shiftToCircleLayer[i].oblLayer.moveLeftTo) { 
	while( shiftToCircleLayer[i].oblLayer.layer.left < shiftToCircleLayer[i].oblLayer.moveLeftTo - tempL ) 
	    tempL++; 
	shiftToCircleLayer[i].oblLayer.layer.left += tempL 
      }
      else if( !shiftToCircleLayer[i].oblLayer.leftMoved) { 
	shiftToCircleLayer[i].oblLayer.leftMoved = true
	obliqueLeftMoved++
      }

      if( shiftToCircleLayer[i].oblLayer.layer.top < shiftToCircleLayer[i].oblLayer.moveTopTo - (tempT*shiftToCircleLayer[i].oblLayer.topFlag)) {  
	shiftToCircleLayer[i].oblLayer.layer.top += tempT 
      }
      else if( shiftToCircleLayer[i].oblLayer.layer.top < shiftToCircleLayer[i].oblLayer.moveTopTo) {  
	while( shiftToCircleLayer[i].oblLayer.layer.top > shiftToCircleLayer[i].oblLayer.moveTopTo - tempT ) 
	     tempT--
	shiftToCircleLayer[i].oblLayer.layer.top += tempT 
      }
      else if( shiftToCircleLayer[i].oblLayer.layer.top > shiftToCircleLayer[i].oblLayer.moveTopTo + (tempT*shiftToCircleLayer[i].oblLayer.topFlag)) {  
	shiftToCircleLayer[i].oblLayer.layer.top += tempT 
      }
      else if( shiftToCircleLayer[i].oblLayer.layer.top > shiftToCircleLayer[i].oblLayer.moveTopTo) { 
	while( shiftToCircleLayer[i].oblLayer.layer.top < shiftToCircleLayer[i].oblLayer.moveTopTo - tempT ) 
	    tempT++; 
	shiftToCircleLayer[i].oblLayer.layer.top += tempT 
      }
      else if( !shiftToCircleLayer[i].oblLayer.topMoved) { 
	shiftToCircleLayer[i].oblLayer.topMoved = true
	obliqueTopMoved++
      }
    }
  }

  else if(e4) { 
    var i=1, tempL=tempT=0
    for( ; i < shiftToCircleLayer.length; i++ ) { 
      shiftToCircleLayer[i].oblLayer.overOneLeft += shiftToCircleLayer[i].oblLayer.moveLeftBit
      shiftToCircleLayer[i].oblLayer.overOneTop += shiftToCircleLayer[i].oblLayer.moveTopBit

      tempL = Math.floor(shiftToCircleLayer[i].oblLayer.overOneLeft) 
      tempT = Math.floor(shiftToCircleLayer[i].oblLayer.overOneTop) 

      shiftToCircleLayer[i].oblLayer.overOneLeft -= tempL
      shiftToCircleLayer[i].oblLayer.overOneTop -= tempT

      if( shiftToCircleLayer[i].oblLayer.layer.style.pixelLeft < shiftToCircleLayer[i].oblLayer.moveLeftTo - (tempL*shiftToCircleLayer[i].oblLayer.leftFlag)) {  
	shiftToCircleLayer[i].oblLayer.layer.style.pixelLeft += tempL
      }
      else if( shiftToCircleLayer[i].oblLayer.layer.style.pixelLeft < shiftToCircleLayer[i].oblLayer.moveLeftTo) { 
	while( shiftToCircleLayer[i].oblLayer.layer.style.pixelLeft > shiftToCircleLayer[i].oblLayer.moveLeftTo - tempL ) 
	     tempL--
	shiftToCircleLayer[i].oblLayer.layer.style.pixelLeft += tempL
      }
      else if( shiftToCircleLayer[i].oblLayer.layer.style.pixelLeft > shiftToCircleLayer[i].oblLayer.moveLeftTo + (tempL*shiftToCircleLayer[i].oblLayer.leftFlag)) {  
	shiftToCircleLayer[i].oblLayer.layer.style.pixelLeft += tempL
      }
      else if( shiftToCircleLayer[i].oblLayer.layer.style.pixelLeft > shiftToCircleLayer[i].oblLayer.moveLeftTo) {  
	while( shiftToCircleLayer[i].oblLayer.layer.style.pixelLeft < shiftToCircleLayer[i].oblLayer.moveLeftTo - tempL ) 
	     tempL++; 
	shiftToCircleLayer[i].oblLayer.layer.style.pixelLeft += tempL 
      }
      else if( !shiftToCircleLayer[i].oblLayer.leftMoved) { 
	shiftToCircleLayer[i].oblLayer.leftMoved = true
	obliqueLeftMoved++
      }

      if( shiftToCircleLayer[i].oblLayer.layer.style.pixelTop < shiftToCircleLayer[i].oblLayer.moveTopTo - (tempT*shiftToCircleLayer[i].oblLayer.topFlag)) {  
	shiftToCircleLayer[i].oblLayer.layer.style.pixelTop += tempT 
      }
      else if( shiftToCircleLayer[i].oblLayer.layer.style.pixelTop < shiftToCircleLayer[i].oblLayer.moveTopTo) {  
	while( shiftToCircleLayer[i].oblLayer.layer.style.pixelTop > shiftToCircleLayer[i].oblLayer.moveTopTo - tempT ) 
	      tempT--
	shiftToCircleLayer[i].oblLayer.layer.style.pixelTop += tempT 
      }
      else if( shiftToCircleLayer[i].oblLayer.layer.style.pixelTop > shiftToCircleLayer[i].oblLayer.moveTopTo + (tempT*shiftToCircleLayer[i].oblLayer.topFlag)) {  
	shiftToCircleLayer[i].oblLayer.layer.style.pixelTop += tempT 
      }
      else if( shiftToCircleLayer[i].oblLayer.layer.style.pixelTop > shiftToCircleLayer[i].oblLayer.moveTopTo) { 
	while( shiftToCircleLayer[i].oblLayer.layer.style.pixelTop < shiftToCircleLayer[i].oblLayer.moveTopTo - tempT ) 
	     tempT++; 
	shiftToCircleLayer[i].oblLayer.layer.style.pixelTop += tempT 
      }
      else if( !shiftToCircleLayer[i].oblLayer.topMoved) { 
	shiftToCircleLayer[i].oblLayer.topMoved = true
	obliqueTopMoved++
      }
    }
  }

  if(obliqueLeftMoved < shiftToCircleLayer.length || obliqueTopMoved < shiftToCircleLayer.length)
    moveOblique_ID = setTimeout("clearTimeout(moveOblique_ID); moveOblique()", 1) 
  else { moveCircleLoop(); } //회전시작 지점. 
}
로 사선이동을 시작하고 모든 레이어가 사선이동이 끝나면 회전이동 함수 moveCircleLoop() 함수를 실행합니다. 
function moveCircleLoop() { 

  for(var i=1; i < shiftToCircleLayer.length; i++) { 
    if(n4) { 
      shiftToCircleLayer[i].layer.left = shiftToCircleLayer[i].centerX + shiftToCircleLayer[i].moveHol * Math.cos(shiftToCircleLayer[i].moveAngle*Math.PI/180) 
      shiftToCircleLayer[i].layer.top = shiftToCircleLayer[i].centerY + shiftToCircleLayer[i].moveVer * Math.sin(shiftToCircleLayer[i].moveAngle*Math.PI/180) 
    }
    else if(e4) {
      shiftToCircleLayer[i].layer.style.pixelLeft = shiftToCircleLayer[i].centerX + shiftToCircleLayer[i].moveHol * Math.cos(shiftToCircleLayer[i].moveAngle*Math.PI/180) 
      shiftToCircleLayer[i].layer.style.pixelTop = shiftToCircleLayer[i].centerY + shiftToCircleLayer[i].moveVer * Math.sin(shiftToCircleLayer[i].moveAngle*Math.PI/180) 
    }
    shiftToCircleLayer[i].moveAngle += shiftToCircleLayer[i].moveAngleIns 
  } 
  moveCircleLoop_ID = setTimeout("clearTimeout(moveCircleLoop_ID); moveCircleLoop()", shiftToCircleLayer[0]); 
}
로 회전이동을 합니다.


추가예제

TOP