parseInt가 백분율로 작동합니까?

Question

저는 브라우저 창을 가로 질러 div 컨테이너를 단순히 쓸어 버릴 아주 기본적인 애니메이션을 만들려고합니다. 지금 당장은 오른쪽으로 이동하려고합니다. 문제는 현재 Javascript로만 작업 중이며 작동하도록 노력하고 있습니다. 아직 jQuery로 이동하지 않았습니다. 그러니 나와 함께 견뎌주십시오.

내 질문에, javascript의 parseInt 함수를 사용하여 브라우저 창에서 div 컨테이너의 동작을 애니메이션으로 나타냅니다. 그것은 픽셀 (px)과 잘 맞았지만 퍼센티지로는 잘 작동하지 않는 것 같습니다. 나는 전체 브라우저 창에 맞게 조절하기 때문에 특별히 백분율을 사용하려고합니다. 여기에 내 코드입니다 :

var animateright 

function init(){ 
    Obj = document.getElementById('box'); 
    Obj.style.position = "relative"; 
    Obj.style.left = '0%'; 
} 

function moveRight(){ 
    Obj.style.left = ''+parseInt(Obj.style.left)+1'%'; 
    animateright = setInterval(moveRight,100); 
} 

내가 (이 조금 까다로운 '%'와 연결 할 수있는 문자열로 변환 할 수있는에서는 parseInt 함수를 받고 있지만, 기본 전제 때마다 내가하는 MoveRight를 실행하는 것입니다 발견), I 상자가 브라우저 창 오른쪽으로 1 % 이동하도록하십시오. parseInt가 '0 %'에서 퍼센트 기호를 구문 분석하지 않는 한 이것이 올바른 형식이라고 생각합니다.

물론이 상자에 백분율로 애니메이션을 적용하는 더 좋은 방법이 있다면 javery (jQuery 아님)에 알려주세요.

Answer 1

당신은 순수 CSS3에서 그것을 할 수 있습니다 : 당신이 선형 이동을 좋아하지 않는 경우에 이을 쉽게

jsBin demo

#box { 
    width: 20%; 
    height: 10%; 
    background: red; 
    position: absolute; 
    animation: moveLeftRight 3s infinite linear alternate; 
} 
@keyframes moveLeftRight { 
    0% { left: 0%; } 
    100% { left: 80%; } 
} 

, 당신은 시도 할 수 있습니다.