筹款温度计方法

时间:2010-08-04 06:05:19

标签: jquery html css jquery-plugins

我需要为网站创建一个温度计类型的小部件,我可以在其中输入目标和当前数量,然后生成一个显示进度的图形。我在想jQuery / CSS是最好的方法,但后来我开始考虑使用jQuery UI库中的垂直滑块并为其设置外观。你们怎么都接近这个?我已经找了一个插件,但没有发现任何相关内容。

2 个答案:

答案 0 :(得分:4)

您可以通过带有background图像的简单div制作指标,由JS定位。

  1. 创建一个div
  2. 设置高度/宽度
  3. 设置bg图片
  4. 根据值
  5. 计算bg图像的位置
  6. background-position css属性设置为结果

答案 1 :(得分:1)

我认为您可以查看此小部件

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

虽然在当前版本中,如果将较低的值更改为除零以外的任何值,则UI不会完美更新。可以找到更正后的版本:

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