javascript - JQuery 进度条插件 - 100% 宽度

Question

我再次对这个插件有疑问:http://t.wits.sg/2008/06/20/jquery-progress-bar-11/

我想要实现的是将进度条的宽度设置为 100%，使其与其所在的容器一样宽。

到目前为止，我在插件中更改了这一行:

$bar.css("width",config.width+"px");

对此:

$bar.css("width",config.width+"%");

然后我在初始化插件时将宽度设置为 100。那行得通，进度条是 100% 宽，只有一个问题，应该填充进度条的图像(进度条背景)保持相同的宽度，小于进度条宽度并重复自身，这看起来很糟糕.

我希望这对某些人有意义。

如果有人对进度条插件有任何经验，请帮助我。

Answer 1

我认为这是一个样式问题，您可能在图像背景样式上设置了 repeat-x 这就是它重复的原因，您可能需要制作更大的图像或设置不同类型的背景，例如颜色。

我认为你的 CSS 应该看起来像这样:

bar{
      background-image:url('mybackground.gif');
      background-repeat:repeat-x; //or just background-repeat:repeat
}

因此您可能需要删除以下行，这将防止图像随着元素的增长而被复制。

background-repeat:repeat-x;

或将其更改为:

background-repeat:no-repeat;

因此，如果您想使用该图片以外的用户，它可能是这样的:

 bar{
      background-color:#EEEFFF;
 }

希望对您有所帮助。