进度条灌装 - jQuery的执行

Question

我使用jQuery实现我自己的进度条。 我的问题是如何填充（例如）只有30％的背景？ 我有什么选择？ 基本上，进度条是一个简单的div带有圆角（-moz-边界半径）。 我正在使用Firefox 3.6.3。

[更新] 我试图this例子。 如何强制填充区域的右侧不像第三个例子那样圆形？第四个例子是有问题的，但是...你会如何解决这个问题？

谢谢！

Answer 1

不知道你正在使用动画进度条的东西，但如果你可以改变半径接近结束时，您可以平稳过渡。

$('#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 

Here's an example

Answer 2

一个简单的选择是使用背景色，确保外容器的宽度是固定的，只需要设置内部div的宽度的百分比这是一样的进步。

Answer 3

您可以使用2个的div，一个在另一个内部，把背景在内之一，设置它的宽度与一％，这样的事情：

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

Answer 4

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

HTML：

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

CSS：

#progressBar { 
    width: 200px; 
    height: 20px; 
    background: url('http://o.imm.io/x9E.jpg') no-repeat; 
    background-position: -200px 0px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
} 

JS：

function setProgress(target,value) { 

    var oldPosition = $(target).css("backgroundPosition"); 

    // Log the old position 
    console.log("Old position: " + oldPosition); 
    var newPosition = parseInt(oldPosition) + parseInt(value); 

    // Log the new position 
    console.log("New position: " + newPosition); 
    $(target).animate({backgroundPosition: newPosition + 'px 0px'}) 
} 

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

编辑2：查看此代码的JSBin版本。

编辑3：正如OP所说，他们需要进度条的灵活大小。这个实现不会那样做。我会建议（如我早些时候）使用jQueryUI Progress Bar。它很容易使用，而且相当轻巧。

编辑4：我想出的这个另一种实现方式，这需要多一点的Javascript，但你可以在这里测试一下：http://jsfiddle.net/ntnz4/7/

Answer 5

我做你在做什么我的几个网站，这里就是我所做的：

我第一次做了一些基本的标记：

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

而CSS：

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

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

这样做时，设定的进度其实是非常简单的。无论您希望在进度栏中显示哪种进度，您都设置为#ProgressBarInner元素的宽度。例如，如果你想显示32％，你会设置这样的：

width: 32%

为progressBarInner股利。

我不知道如何做到这一点使用jQuery关闭我的头顶，但我知道一个事实，你可以使用它设置CSS属性，所以这是完全可能的。

Answer 6

HTML：

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

CSS：

.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; 
} 

Answer 7

我你想要就在充满色彩的圆角做什么有点糊涂了！但如果它应该是直线前进，而不是圆角，只需用css overflow设置包装div：hidden;

因此，内部div将一路晋级到100％，并且当传球区域将产生一个很酷的效果！