javascript - parseInt 可以处理百分比吗？

Question

我正在尝试创建一个非常基本的动画，它可以简单地在浏览器窗口中左右扫动 d​​iv 容器。现在，我只是想让它向右移动。问题是，我现在只使用 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() 时，我希望框移动 1%浏览器窗口的右侧。我认为这是正确的格式，除非 parseInt 没有将百分号解析为“0%”。

当然，如果有人有更好的方法用百分比和 Javascript(不是 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%; }
}

如果您不喜欢线性移动，您可以尝试ease。