募捐网站，提供实时捐赠柜台

Question

对于筹款活动网站，我试图在页面上实现一种功能，该功能在当前黑白颜色的图像中着色。图像需要根据收到的捐赠百分比（通过paypal和其他方法）填充颜色（从左到右）。捐赠百分比完成后，图像将完全变为彩色。

有没有人对我能做到这一点的最好方法有任何想法？

Answer 1

早上好，谢谢你的提问。既然你在征求意见（并且没有发布任何代码），我会发一个答案，希望能指出你正确的方向。

作为我答案的前言：

• 您没有提及如何或何时计算收到的捐款百分比，因此我假设您在绘制/更新图片时可以使用这些数据。

  < / LI>

• 如果您希望将图像显示在进度条或其他类型的滑块中（图像是＆＃34;蒙皮＆＃34;在控件上方并将颜色更改为控制工作），或者如果您只是在页面上显示图像。

非常简单的想法可能如下：

1. 在网页上并排放置同一图像的彩色和灰度副本。
2. 使用捐赠百分比来确定这些图像的可见区域。例如：如果您达到捐赠目标的33％，则可以显示彩色图像的前三分之一，然后显示剩余的三分之二灰度图像。 （你可能需要把它放在一些更有活力的东西 - 不只是在网站视图或表格部分 - 如果你需要实时跟踪捐款。也许是AJAX救援？）

基于一些初步的在线搜索，人们可能已经使用CSS，javascript和jquery（以及其他语言）实现了这样的想法。以下是一些谈论类似问题的链接（希望您可以从他们的代码中提取知识以使您的项目受益）：

JQuery / HTML / CSS Grayscale to color image slider （另一个stackoverflow问题）

http://webdesignerwall.com/tutorials/html5-grayscale-image-hover （将鼠标悬停在其上时将灰度图像转换为彩色的HTML5代码）

希望这会有所帮助。我知道链接不能提供问题的确切答案，但是它们涵盖的一些内容可用于创建项目。