parseInt可以处理百分比吗?

Does parseInt work with percentages?

本文关键字：百分比 处理 parseInt      更新时间：2023-09-26

我试图创建一个非常基本的动画，将简单地扫过浏览器窗口的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()时，我希望该框向浏览器窗口右侧移动1%。我认为这是正确的格式，除非parseInt没有解析%符号远离'0%'。

当然，如果有人有任何更好的方法用Javascript和百分比动画这个框(不是jQuery)让我知道!

你可以在纯CSS3中这样做:

<<p> jsBin演示/strong> 
#box {
    width: 20%;
    height: 10%;
    background: red;
    position: absolute;
    animation: moveLeftRight 3s infinite linear alternate;
}
@keyframes moveLeftRight {
    0%   { left: 0%; }
    100% { left: 80%; }
}

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

相关文章：