Javascript 进度条填充-jQuery实现

我正在使用jQuery实现自己的进度条。 我的问题是，我怎样才能（举例来说）只填写其中30%的背景？ 我有什么选择？ 基本上，进度条是一个简单的

div

，带有圆角（-moz边框半径）。 我正在使用Firefox 3.6.3

[更新] 我试着举个例子。 如何强制填充区域的右侧不象第三个示例中那样被圆角？第四个例子是有问题的，尽管。。。你将如何解决这个问题

---

谢谢

一个简单的选项是使用背景色，确保外部容器的宽度是固定的，然后只需将内部分区的宽度设置为与进度相同的百分比。

您可以使用两个分区，一个在另一个内部，将背景放在内部分区上，并将其宽度设置为%，类似于以下内容：

<div style="">
    <div style="background: red; width: 50%">&nbsp;</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

您可以使用一个div和一个图像，正如我前面在评论中提到的那样。这是一个你可以做到的方法。（未完全测试，因此可能会断裂。）

HTML:

JS:

编辑：我添加了圆角，它完全按照您指定的方式工作，圆角没有问题

编辑2：检查此代码的版本

编辑3：正如OP所说，他们需要灵活调整进度条的大小。这个实现不会做到这一点。我将推荐（正如我前面提到的）使用。它易于使用，而且相当轻

---

编辑4：我提出了另一个实现，它需要更多的Javascript，但您可以在这里进行测试：

我已经完成了您为我的一些网站所做的工作，下面是我所做的：

我首先做了一些基本的标记：

<div id="progressBar">
    <div id="progressBarInner"></div>
</div>

完成后，设置进度实际上非常简单。无论希望在进度条中显示什么进度，都可以设置为

#ProgressBarInner

元素的宽度。例如，如果您想显示32%，您可以设置：

宽度：32%

对于

progressBarInner

div

我不知道如何使用jQuery实现这一点，但我知道，事实上，您可以使用它设置CSS属性，因此这是完全可能的。

HTML:

<div class="progress"><div style="width:30%"></div></div>

---

不知道使用什么设置进度条的动画，但如果可以在接近终点时更改半径，则可以获得平滑过渡

$('#inner4')
    .css('width',25)
    .css('-moz-border-radius-topright','0')
    .css('-moz-border-radius-bottomright','0')
    .animate(
      {
        width:425
      },
      3000, 'linear',
      function() {
          $('#inner4').animate({
            width:450,
            '-moz-border-radius-bottomright':'+=25',
            '-moz-border-radius-topright':'+=25'
          },
          200,'linear',
          function() {}
        );//end inner animate
      }
    );//end animate

---

对于填充颜色上的圆角，我有点困惑您想要做什么！但是如果它应该是直线前进，而不是四舍五入，那么只需将包装器div设置为css overflow:hidden

---

---

这样，内部div将一直前进到100%，当通过圆形区域时，将产生一种凉爽的效果

你是在问如何填充进度条还是只填充进度条的背景宽度与进度条值成比例的背景。要修复第四个示例，只需将红色填充颜色放在容器后面，把容器的背景做成白色的，中间是透明的。你能给我们演示一下这个例子吗？这个问题是如何达到7的赞成票和2的赞成票的？O_oSo您建议使用两个容器。我想知道是否真的需要内部容器。。。也许有一些选项可以用背景只填充部分？你可以用一个div和一个使用背景位置的背景图像来完成。您知道进度条有多宽，并且图像至少需要有这么宽。然后根据进度的值，移动背景位置以填充div。最好使用外部和内部，以便可以将外部设置为静态宽度，例如120px或适合页面的某个值，然后，可以使用百分比调整内部div的大小，它将相对于外部div。下面的Adirael示例很好地解决了这一问题。此外，JQuery本身有一个非常简单的示例，需要JQuery.ui.core:+1作为JQuery ui progressbar。它很容易使用。然而，如果你想实现你自己的，Russ C和Adirael提供的方法都有效。我可以给div一个高度，而不仅仅是宽度，我想是懒惰！您可以将样式更改为“宽度：50%；高度：5px”，并删除不可破坏的空间：）好的，谢谢！我尝试了你的想法，但无法理解如何强制填充区域的右侧不要像这里的第三个示例中那样变圆：尽管第四个示例有问题。。。你将如何解决这个问题？你可以检测进度条何时接近满，并添加CSS样式使其弯曲。由于Firefox溢出剪辑中存在缺陷，除非你使用一些相当复杂的Javascript将弯曲的角添加到右侧，否则你在第四个示例中看到的问题根本无法解决。必须基于父元素的角点来计算要执行此操作的点。我将重新命名jQueryUIProgressBar，因为他们已经实现了这样一个方法。谢谢你的解释，但我的主要问题是圆角，我不知道如何管理。没错，这是限制在一个设定的大小。但是，您没有指定需要用户才能设置宽度。；）刚刚添加了一个新版本的进度条，检查出来谢谢你的努力！有一个问题，如果CSS中的边界半径更改为20px，那么您的代码没有考虑到这一点，对吗？我正在寻找100%CSS可配置的解决方案。它应该是，代码从CSS属性获取边框宽度。不过，它可能需要更多的代码才能使其更加健壮。这里有一个稍微改进的、更健壮的版本，可以更好地处理没有边框半径的浏览器：

<div id="progressBar">
    <div id="progressBarInner"></div>
</div>

#progressBar {
    width: 200px;
    height: 20px;
}

#progressBarInner {
    background: url('path/to/your/progress/image.jpg');
    width: 100%;
    height: 100%;
}

<div class="progress"><div style="width:30%"></div></div>

    .progress {
    width: 300px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.progress div {
    background: url(background.png);
    height: 10px;
    -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px;
    -webkit-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px;
}

$('#inner4')
    .css('width',25)
    .css('-moz-border-radius-topright','0')
    .css('-moz-border-radius-bottomright','0')
    .animate(
      {
        width:425
      },
      3000, 'linear',
      function() {
          $('#inner4').animate({
            width:450,
            '-moz-border-radius-bottomright':'+=25',
            '-moz-border-radius-topright':'+=25'
          },
          200,'linear',
          function() {}
        );//end inner animate
      }
    );//end animate