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

Posted 2023-02-18

【中文标题】筹款网站，设有实时捐款柜台

【英文标题】：Fundraiser website, with real-time donation counter

【发布时间】：2015-03-22 11:37:56

【问题描述】：

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

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

【问题讨论】：

欢迎来到 SO！到目前为止，请发布您的代码，并告诉我们您到底遇到了什么问题。

AJAX 请求获取百分比。像ProgressBar.js 这样的东西来显示它。

【参考方案1】：

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

作为我回答的序言：

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

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

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

将同一图像的彩色和灰度副本并排放置在网页上。 使用捐赠百分比来确定这些图像的可见区域。例如：如果您的捐赠目标达到 33%，您可以显示前三分之一的彩色图像，然后显示剩余三分之二的灰度图像。 （如果您需要实时跟踪捐赠，您可能需要将它放在更动态的地方 - 不仅仅是在站点视图或表单部分中。也许 AJAX 可以帮助您？）

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

JQuery / html / CSS Grayscale to color image slider （另一个 *** 问题）

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

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

【讨论】：

感谢您的帮助 :)。图像将在页面上自行显示。我会尽力了解这一切，然后告诉你进展如何