筹款温度计方法

Question

我需要为网站创建一个温度计类型的小部件，在那里我可以输入目标和当前金额，然后生成一个显示进度的图形。我认为使用jQuery/CSS将是最好的方法，但后来我开始考虑使用jQuery UI库中的垂直滑块并对其进行皮肤处理。你们将如何处理这个问题呢？我一直在寻找一个插件，但没有发现任何相关的东西。

Answer 1

你可以通过一个简单的带有background图像的div来制作指示器，由JS定位。

1. 根据值创建
2. 设置高度/宽度
3. 设置bg image
4. calculate bg图像的位置
5. 设置background-position css属性的结果

Answer 2

我想你可以签出这个小工具

http://david.dupplaw.me.uk/developer/jquery-thermometer

不过，在当前版本中，如果将较低的值更改为除零以外的任何值，则UI不会完全更新。更正后的版本可以在下面找到：

https://github.com/mahfuzmohammad/jquery.thermometer