javascript - 将百分比数字转换为 marginTop 动画像素值

Question

我需要取一个百分比值，将其转换为像素并使用 JQuery animate 向上移动一个 div，以获得我正在尝试构建的进度条。包含需要向上移动的图形的 div 的高度为 268 像素（所以这是我们的 100%）。

例如，我将 38% 作为我需要转换为像素值的起始百分比值，并将 id 为 prog_anim 的 div 向上移动到该像素数（应该是 101 像素左右）

var result = 38 / 100 * 268;
function bgr_animate(result) {
    $('#prog_anim').animate({
    'marginTop' : result
    });
}

然后我在执行该操作的按钮上有以下链接：

a href="javascript:;" onclick="bgr_animate(result)"

作为一个完全的 Javascript 菜鸟，我不知道上面的语法哪里错了。有人可以在这里纠正我吗？谢谢！

score 1 · Accepted Answer

我看到了一些需要改进的地方。

代替硬编码 268，使用var graphicHeight = $("#prog_anim").outerHeight();.

您需要反转边距顶部的方向，因为您希望它向上移动。marginTop 是一种方法，但设置 CSSposition: absolute;并使用 top 而不是 marginTop 会更好。

所以：

var result = -(38 / 100 * graphicHeight);

score 0 · Accepted Answer

试试这个：

function bgr_animate(percent, height) {
    var pixels = percent / 100 * height;
    $('#prog_anim').animate({
        'marginTop' : pixels
    });
}

还有你的按钮；

<a href="javascript:;" onclick="bgr_animate(30, 268)">

score 0 · Accepted Answer

试试这个

$('#prog_anim').animate({
      height: result
      top:-=resultInc
      }, 5000, function() {
     alert("Animated");
});

其中 resultInc 是它增长的像素数

使用它，您可以向上移动并向下增加高度，给人一种向上生长的印象

3 回答 3