筹款网站，设有实时捐款柜台

Question

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

有没有人对我可以使这成为可能的最佳方式有任何想法？

Answer 1

早上好，谢谢你的提问。由于您是在寻求想法（并且尚未发布任何代码），因此我将发布一个答案，希望能为您指明正确的方向。

作为我回答的序言：

• 您没有提及如何或何时计算收到的捐款百分比，所以我假设当您绘制/更新图像时数据将可用。

• 您没有提及是否希望您的图像在进度条或其他类型的滑块中实现（图像在控件上“蒙皮”并随着控件的工作而改变颜色），或者如果您将只在页面上单独显示图像。

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

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 代码）

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