jQuery根據百分比淡出圖像部分？

Question

用圖像而不是酒吧製作「進度條」的最佳方式是什麼？

我想有一個百分比變量控制多少圖像是不透明的。換句話說，如果％= 33％，圖像的底部33％將是正常的，但是最高的66％會稍微變淡。

感謝您的幫助！

ř

Answer 1

我願意做這與兩個圖像（它可以是相同的圖像加載兩次）在另一個的頂部的一個。

http://jsfiddle.net/MPFyt/

這是不完全正確的，但你可以使用它作爲一個起點。

Answer 2

最好的辦法是使用兩個圖像。完全相同的位置，背景和前景，並根據百分比製作前景片段。

Answer 3

您可以通過使用Javascript更改其CSS來動態更改圖像的不透明度。它看起來像這樣：

var opacityvalue;//the opacity [a range from 0 (for invisible) to 1 (for visible)] 
$('#image').style.opacity=opacityvalue; 
$('#image').filters.alpha.opacity=opacityvalue*100; 

我說實話，我沒有測試它，所以可能有一些錯誤，但概念是存在的。

CSS參考：http://www.w3schools.com/css/css_image_transparency.asp

更改CSS瓦特/ jQuery的：http://www.jquery4u.com/dynamic-css-2/change-css-jquery/

Answer 4

這裏有一個簡單的方法來做到這一點：

http://jsfiddle.net/DQ4Fh/13/

基本上只是堆兩個div具有相同的背景圖片（一個放置在頂部，另一個放置在底部），使一個不透明，並改變兩個圖像的高度，以控制每個圖像的曝光量。

在生產中，您應該在setProgress函數中使用jquery的animate方法，以便順利更新。我用來設置不透明度的CSS不是跨瀏覽器，你應該更新它或使用jquery來設置dimmed div的不透明度。