left와 top의 값이 같지않을 때 한번 이동할 left와 top값을 구할려면 한 가지를 주의해야합니다. nn4와 ie4에서 레이어를 이동시킬 수 있는 최소값은 nn4는 0.5이고 ie4는 1입니다. nn4는 0.5이상의 값은 반올림을 하여 1px를 이동합니다. 2.4는 2px를 이동합니다. ie4는 0.9 이하는 이동하지 않습니다.

레이어를 오른쪽으로 300, 아래로 100px 이동시킬려면 left에게 300, top에게 100을 더해주어야 합니다. 이것을 부드럽게 이동시키기 위해서 left와 top의 한번 이동값을 3대1로 left와 top의 값을 증가 시켜주어야 합니다. left의 한번 이동값을 1로 주면 가장 부드럽게 이동시키기 위해서 top의 증가값은 0.333333333.... 이 가장 정확한 비율의 값이 됩니다. 하지만, nn4는 0.4 이하의 값은 반올림에서 반영되지 않고 ie4는 0.9이하의 값은 반영하지 않습니다. left의 증가값 1, top의 증가값 0.3333으로 레이어를 이동시키면 왼쪽으로는 증가하여 이동하지만, 아래쪽으로는 top의 값이 반영이 되지않아 이동하지 않습니다. 레이어 이동이 끝나면 좌표는 left=원래 left 좌표값+300, top=원래 top좌표값 + 0이 됩니다.

이 문제를 해결하기 위해서는 최소 이동값을 1로주고 이동폭이 큰 좌표값으로 2, 3, 4의 소숫점을 가지지 않는 좌표값을 지정하면 되지만, 이것은 레이어이동을 할때 일일이 이동값을 지정해야하고 left와 top의 비율이 2대1이하나 1.5대1 2.5대1 등 소숫점을 가지는 비율의 이동좌표에는 정확한 좌표로 이동을 할 수 없습니다. 즉 이동을 시킬 수 있는 크기의 좌표가 제한이 되고 이동값이 1로 제한이 되어서 레이어를 1이하의 미세한 이동은 할 수 없습니다.

그래서 이동값이 큰 left나 top의 좌표에 최소의 이동값 1을 지정하고 작은 좌표의 값에 큰 좌표의 값을 나누어 주면 작은 좌표의 이동값이 1 보다 작은 소숫점의 좌표가 나옵니다. 1과 소숫점의 이동값을 이동시켜야 합니다.

left의 증가값 1 top의 증가값이 0.333...인 left:300, top:100의 3대1 이동값을 가지는 레이어를 이동시키기 위해서 top의 증가값에 소숫점 이하의 3333...을 한번 이동시에 저장을 하고 1이 넘으면 그때 그 값을 지정하고 다시 저장된 값에서 1이 넘는 소숫점 위의 정수값을 빼줍니다. 그러면 거의 3대1의 비율로 레이어가 이동을 합니다. 한번 이동때마다 생기는 소숫점 이하의 값을 버리지 않는 것입니다.

function init() {
	if(n4) {
		oblLayer = new Array()
		oblLayer[0] = 1 //이동시간
		oblLayer[1] = new obliqueSet(document.D1, 400, 0, 4) 
	}
	else if(e4) {
		oblLayer = new Array()
		oblLayer[0] = 1
		oblLayer[1] = new obliqueSet(document.all.D1, 400, 0, 4) 
	}
	moveOblique();
}
--
<div id=D1 style="position:absolute; left:100; top:100; width:100">...</div>

function obliqueSet(layer, leftTo, topTo, shift) { 
	this.layer=layer
	this.leftBit=getBit(layer, leftTo, topTo, "left")
	this.topBit=getBit(layer, leftTo, topTo, "top")
	this.leftPom=getBit(layer, leftTo, topTo, "leftPom") 
	this.topPom=getBit(layer, leftTo, topTo, "topPom") 

	this.moveLeftTo = leftTo
	this.moveTopTo = topTo

	this.moveLeftBit = this.leftBit * shift 
	this.moveTopBit = this.topBit * shift

	this.overOneLeft=0 
	this.overOneTop=0
}

function getBit(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 == "leftPom") return flagLeft
	else if(leftOrTop == "topPom") return flagTop
}

leftAllMoved=topAllMoved=1 //각 레이어가 다 이동했는지 판단함.  
function moveOblique() { 
  if(n4) { 
    var i=1, tempL=tempT=0
    for( ; i < oblLayer.length; i++ ) { // && !oblLayer[i].moved
      oblLayer[i].overOneLeft += oblLayer[i].moveLeftBit
      oblLayer[i].overOneTop += oblLayer[i].moveTopBit

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

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

      if( oblLayer[i].layer.left < oblLayer[i].moveLeftTo - (tempL*oblLayer[i].leftPom)) { 
	oblLayer[i].layer.left += tempL
      }
      else if( oblLayer[i].layer.left < oblLayer[i].moveLeftTo) { 
	  while( oblLayer[i].layer.left > oblLayer[i].moveLeftTo - tempL ) 
	    tempL--
	  oblLayer[i].layer.left += tempL
      }
      else if( oblLayer[i].layer.left > oblLayer[i].moveLeftTo + (tempL*oblLayer[i].leftPom)) { 
	oblLayer[i].layer.left += tempL
      }
      else if( oblLayer[i].layer.left > oblLayer[i].moveLeftTo) { 
	while( oblLayer[i].layer.left < oblLayer[i].moveLeftTo - tempL ) 
	  tempL++; 
	oblLayer[i].layer.left += tempL 
      }
      else if( !oblLayer[i].leftMoved) { 
	oblLayer[i].leftMoved = true
	leftAllMoved++
      }
      if( oblLayer[i].layer.top < oblLayer[i].moveTopTo - (tempT*oblLayer[i].topPom)) {  
        oblLayer[i].layer.top += tempT 
      }
      else if( oblLayer[i].layer.top < oblLayer[i].moveTopTo) {  
	while( oblLayer[i].layer.top > oblLayer[i].moveTopTo - tempT ) 
	  tempT--
	oblLayer[i].layer.top += tempT 
      }
      else if( oblLayer[i].layer.top > oblLayer[i].moveTopTo + (tempT*oblLayer[i].topPom)) {  
	oblLayer[i].layer.top += tempT 
      }
      else if( oblLayer[i].layer.top > oblLayer[i].moveTopTo) {  
	while( oblLayer[i].layer.top < oblLayer[i].moveTopTo - tempT ) 
	  tempT++; 
	oblLayer[i].layer.top += tempT 
      }
      else if( !oblLayer[i].topMoved) { 
	oblLayer[i].topMoved = true
	topAllMoved++
      }
    }
  }

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

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

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

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

      if( oblLayer[i].layer.style.pixelTop < oblLayer[i].moveTopTo - (tempT*oblLayer[i].topPom)) {  
	oblLayer[i].layer.style.pixelTop += tempT 
      }
      else if( oblLayer[i].layer.style.pixelTop < oblLayer[i].moveTopTo) {  
	while( oblLayer[i].layer.style.pixelTop > oblLayer[i].moveTopTo - tempT ) 
	  tempT--
	oblLayer[i].layer.style.pixelTop += tempT 
      }
      else if( oblLayer[i].layer.style.pixelTop > oblLayer[i].moveTopTo + (tempT*oblLayer[i].topPom)) {  
	oblLayer[i].layer.style.pixelTop += tempT 
      }
      else if( oblLayer[i].layer.style.pixelTop > oblLayer[i].moveTopTo) {  
	while( oblLayer[i].layer.style.pixelTop < oblLayer[i].moveTopTo - tempT ) 
	  tempT++; 
	oblLayer[i].layer.style.pixelTop += tempT 
      }
      else if( !oblLayer[i].topMoved) { 
	oblLayer[i].topMoved = true
	topAllMoved++
      }
    }
  }
  if(leftAllMoved < oblLayer.length || topAllMoved < oblLayer.length)
    moveOblique_ID = setTimeout("clearTimeout(moveOblique_ID); moveOblique()", oblLayer[0])
  else { 
    leftAllMoved=1
    topAllMoved=1
    alert("이동끝")
  }
}

사선으로 이동하기 2