对于筹款网站，我正在尝试在页面上实现一项功能，该功能可以在当前为黑白到彩色的图像中着色。图像需要根据收到的捐款百分比（通过PayPal和其他方法）填写颜色（从左到右）。一旦捐赠百分比完成，图像将完全是彩色的。
有没有人对我实现这一目标的最佳方式有任何想法？
早上好，谢谢你的提问。由于您正在征求想法（并且没有发布任何代码），我将发布一个答案，希望为您指明正确的方向。
作为我回答的序言：
-
您没有提到如何或何时计算收到的捐款百分比，所以我假设在您绘制/更新图像时可以使用数据。
-
您没有提及是否希望在进度条或其他类型的滑块中实现图像（其中图像在控件上"蒙皮"并在控件工作时更改颜色），或者是否只在页面上显示图像本身。
一个非常简单的想法如下：
- 将同一图像的彩色和灰度副本并排放置在网页上。
- 使用捐赠百分比来确定这些图像的可见区域。例如：如果您达到捐赠目标的 33%，则可以显示彩色图像的前三分之一，然后显示灰度图像的剩余三分之二。（如果您需要实时跟踪捐款，您可能需要将其放在更动态的内容中 - 而不仅仅是在网站视图或表单部分中。也许 AJAX 来救援？
基于一些初步的在线搜索，人们可能已经使用CSS，javascript和jquery（以及其他语言）实现了这样的想法。以下是一些讨论类似问题的链接（希望您可以从他们的代码中提取知识以使您的项目受益）：
JQuery/HTML/CSS 灰度到彩色图像滑块（另一个堆栈溢出问题）
http://webdesignerwall.com/tutorials/html5-grayscale-image-hover（HTML5代码，用于将鼠标悬停在灰度图像上时将其转换为彩色图像）
希望这有帮助。我知道这些链接没有提供问题的确切答案，但它们涵盖的一些内容可用于创建您的项目。