你好我正在嘗試創建一個進度條，它的點擊事件減少百分比（用一個小動畫），並將其顏色從綠色變爲紅色。所以第一種顏色是100％綠色。如果按一次，寬度應該是99％，顏色會稍微變紅一點。這應該繼續，直到內進度條的寬度爲1％，顏色爲100％紅色。與顏色過渡jQuery的進度條？

這可能嗎？或者我必須設置一些限制，其中的顏色更改爲另一個限制？我只會使用jquery和jquery mobile。（NO的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

到目前爲止，它的工作原理，但它不具有任何動畫，也沒有顏色變化...

來源

2014-02-25 Alex Stanese

我遇到了一些麻煩可視化到底是什麼，這是應該做的事情..你認爲你可以把它在一個jsfiddle？ – user3334690

@ user3334690我試圖創建一個這樣的欄：http://www.cssflow.com/snippets/animated-progress-bar/demo但是當我點擊一個按鈕時，它應該只減少1％是它的iutside）並且不顯示來自上面的百分比（如示例中那樣）。它不會在我的代碼上工作，因爲我輸入的代碼只是它的一半，你不會理解整個事情+我想在phonegap應用程序中使用它。 –

FIDDLE

它使用a small slider plugin I wrote jQuery的，但應該給你的這可怎麼是個好主意實現。

訣竅是簡單地計算進度條的％值，然後將其應用於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); 
});

來源

2014-02-25 13:56:14 SW4

謝謝。但是，第三個基本顏色可以在mittle中（黃色）嗎？正如在這個例子中：http://www.cssflow.com/snippets/animated-progress-bar/demo它可以通過點擊一個小動畫按鈕減少？這正是我在尋找的時候！ –

http://jsfiddle.net/gm4tG/3/ - 通過黃色和按鈕設置進行顏色更改。我還沒有添加動畫等，你可能想玩 – SW4

修改上面：http://jsfiddle.net/gm4tG/4/ – SW4

與顏色過渡jQuery的進度條？

回答

FIDDLE

相關問題