的 FIDDLE

Question

您好我正在尝试在点击事件中创建一个进度条，它以百分比减少（使用小动画）并将其颜色从绿色更改为红色。所以第一种颜色是100％绿色。如果我按一次，宽度应为99％，颜色稍微变红。这应该持续到内部进度条的宽度为1％并且颜色为100％红色。

这可能吗？或者我必须设置一些限制，颜色变为另一个？我只会使用jquery和jquery mobile。（没有jquery-ui）

到目前为止，我有这个：

css:
#battery{
    height: 100%;
    margin-left: 2%;
    margin-top: 1%;
    border-color: black;
    border-style: solid;
}

#battery-inner{
    background:green;
    height: 100%;
    float: right;
    width: 100%;
}

js（包含在所需的onclick（）函数中）：

$bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) -10 + '%');

我希望颜色与此示例相似（红色边，黄色中间，绿色另一边）

http://www.cssflow.com/snippets/animated-progress-bar/demo

到目前为止它有效，但它没有任何动画，也没有颜色变化......

Answer 1

的 FIDDLE

这在jQuery中使用a small slider plugin I wrote，但是应该让你知道如何实现这一点。

诀窍就是计算进度条的％值，然后将其应用于RGB颜色，反之为RED组件，逐渐为绿色。

HTML

<div id='slider' class='sliderBar'></div> <button>Remove 10%</button>

CSS

html, body { height:100%; width:100%; margin:0; padding:0; } #slider { height:20px; max-height:20px; } .sliderBar-progress { background:rgb(0, 255, 0); }

的jQuery

$('#slider').sliderBar({ start: 100, onChange: function (val) { var red = 0, green = 0; if (val >= 50) { red = 255 - Math.round(((val - 50) / 50) * 255); green = 255; } else { red = 255; green = Math.round(((val) / 50) * 255); } $('.sliderBar-progress').css({ background: "rgb(" + red + "," + green + ",0)" }); } }); $('button').on('click', function () { $('#slider').setsliderBar($('#slider').getsliderBar()-10, true); });

带有颜色过渡jquery的Progressbar？

1 个答案:

的 FIDDLE