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的不透明度。