1

我希望进度条应该有三个不同的，比如说从 o t0 40 是蓝色 40 到 80 是红色，从 80 到 100 是绿色。我搜索了很多，但我只得到简单的条移动。有什么办法可以做到这一点。

我正在使用我得到的以下代码，但它也没有移动。

  <!doctype html>
  <html lang="en">
  <head>
  <meta charset="utf-8" />
  <title>jQuery UI Progressbar - Default functionality</title>
  <link rel="stylesheet"  href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
   $(function() {
   $( "#progressbar" ).progressbar({
    value: 37
  });
 });

 </script>
 </head>
 <body>
 <div id="progressbar"></div>
 </body>
 </html>
4

4 回答 4

0

想到了两种不同的方法（如果您不想使用 chermanarun 提到的 CSS3 渐变：

  1. 背景图像：如果您知道进度条的宽度，只需创建一个在您指定的点设置三种颜色的背景图形。将此背景应用于进度指示器。

  2. 分层条：这要求您将前两个条的增长“限制”在进度的上限范围内（因此条 1 的宽度不能超过 40%，条 2 的宽度不能超过 80%）。使用 CSS 定位和 z-indexing 使所有条具有相同的左侧/顶部位置，并将它们堆叠（顶部的条 1，中间的条 2，底部的条 3）。随着加载进度条的增长，前两个将停止在其上限，允许下面的条继续前进，给人一种无缝进度的错觉。

于 2013-04-03T09:20:02.797 回答
0

听起来您想在更改事件中挂钩并检查进度在哪里，然后从中重新着色条。看着API它看起来是双重的

于 2013-04-03T07:50:43.917 回答
0

我不知道它在 Jquery UI 中是怎样的，但你可以简单地使用 CSS 并制作 2 层，一层是蒙版，另一层是图像，其中 40% 的宽度是蓝色，然后是 10 个 40-80 红色和 80-100 个绿色你需要发现它。

在 JQuery 上，您需要隐藏此蒙版，它会向您显示下面的图层。

我用谷歌搜索，我发现主题在哪里回答你的问题

jQuery UI：如何更改 ProgressBar 的颜色？

核实。

于 2013-04-03T07:04:31.663 回答
0

尝试将此 Css 代码应用于您的#progressbar

#progressbar{
width:300px;height:14px;
 background-color:#00aeff;
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#00aeff, endColorstr=#ff0000);
 background-image:-moz-linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:-webkit-linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:-o-linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:-ms-linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
 background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(40%,#00aeff), color-stop(80%,#ff0000),color-stop(100%,#2fff00));}
于 2013-04-03T07:40:25.117 回答