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函数转换为可以与＆＃39;％＆＃39;连接的字符串有点棘手，但基本前提是每次运行moveRight（）时，我都希望框移动浏览器窗口右侧1％。我认为这是正确的格式，除非parseInt没有解析百分号远离＆＃39; 0％＆＃39;。

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

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

parseInt是否与百分比一起使用？

1 个答案: