jQuery根据百分比淡出图像部分？答案

【问题标题】：jQuery fade out portion of image according to percentage?jQuery根据百分比淡出图像部分？
【发布时间】：2011-10-06 20:57:03
【问题描述】：

用图像而不是进度条制作“进度条”的最佳方法是什么？

我想要一个百分比变量来控制图像的不透明程度。也就是说，如果% = 33%，则图像底部的33%会正常，而顶部的66%会稍微褪色。

感谢您的帮助！

【问题讨论】：

褪色是否保持不变？或者您是否还想更改顶部的浅色或深色？？

标签： jquery image opacity progress

【解决方案1】：

这是一个简单的方法：

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

基本上只需堆叠两个具有相同背景图像的 div（一个位于顶部，一个位于底部），减少一个不透明，并更改两个图像的高度以控制每个图像的曝光量。

在生产中，您应该在 setProgress 函数中使用 jquery 的 animate 方法，以便它顺利更新。我用来设置不透明度的 CSS 不是跨浏览器的，你应该更新它或使用 jquery 来设置暗色 div 的不透明度。

【讨论】：

@evan 不错的答案。我没想过使用背景图片，但我喜欢它！
嗨，埃文，我不敢相信你这么快就给了我答案！真的很喜欢你的方法，我会按照你的建议调整它，比如适当的不透明度等，以及更多满足我的需要，但这很好，谢谢！

【解决方案2】：

您可以通过使用 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

使用 jQuery 更改 CSS：http://www.jquery4u.com/dynamic-css-2/change-css-jquery/

【讨论】：

【解决方案3】：

我会用两张图片来做这个（它可以是加载两次的同一张图片）一个在另一个之上。

http://jsfiddle.net/MPFyt/

这并不完全正确，但您可以将其作为起点。

【讨论】：

【解决方案4】：

最好的方法是使用两张图片。两者正好在同一个位置，一个背景和一个前景，并根据百分比制作前景剪辑。

【讨论】：