jQuery和CSS3创建动画车速表

  • 源码大小:8.83KB
  • 所需积分:1积分
  • 源码编号:19JP-3481
  • 浏览次数:663次
  • 最后更新:2023年06月18日
  • 所属栏目:表单
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

jQuery插件可以帮助您创建一个动画化的、高度可定制的速度表,表示您在输入字段中键入的数字。

基于jQuery和CSS3转换和转换。不需要图像。

参见:

  • jQuery和纯JavaScript/CSS中的10个最佳仪表插件

如何使用它:

1.将jQuery库与速度计.css速度计.js在文档中。

  1. <link href="css/speedometer.css" rel="stylesheet">
  2. <script src="/path/to/cdn/jquery.min.js"></script>
  3. <script src="js/speedometer.js"></script>

2.在文档中创建一个输入字段。

  1. <input id="demo">

3.初始化插件。该插件将自动呈现一个附加到您刚刚创建的输入的速度表。

  1. $("#demo").speedometer({
  2. divFact:10
  3. });

4.所有默认设置。

  1. $("#demo").speedometer({
  2.  
  3. /**Max value of the meter*/
  4. maxVal : 180,
  5.  
  6. /**Division value of the meter*/
  7. divFact : 10,
  8.  
  9. /**more than this leval, color will be red*/
  10. dangerLevel : 120,
  11.  
  12. /**reading begins angle*/
  13. initDeg : -45,
  14.  
  15. /**total angle of the meter reading*/
  16. maxDeg : 270,
  17.  
  18. /**radius of the meter circle*/
  19. edgeRadius : 150,
  20.  
  21. /**speed nobe height*/
  22. speedNobeH : 4,
  23.  
  24. /**speed nobe width*/
  25. speedoNobeW : 95,
  26.  
  27. /**speed nobe left position*/
  28. speedoNobeL : 13,
  29.  
  30. /**radius of indicators position*/
  31. indicatorRadius : 125,
  32.  
  33. /**radius of numbers position*/
  34. indicatorNumbRadius : 90,
  35.  
  36. /**speedo-meter current value cont*/
  37. speedPositionTxtWH : 80,
  38.  
  39. /**indicator nob width*/
  40. nobW : 20,
  41.  
  42. /**indicator nob height*/
  43. nobH : 4,
  44.  
  45. /**indicator number width*/
  46. numbW : 30,
  47.  
  48. /**indicator number height*/
  49. numbH : 16,
  50.  
  51. /**indicator mid nob width*/
  52. midNobW : 10,
  53.  
  54. /**indicator mid nob height*/
  55. midNobH : 3,
  56.  
  57. /**no of small div between main div*/
  58. noOfSmallDiv : 2,
  59.  
  60. /**type of event listener*/
  61. eventListenerType : 'change',
  62.  
  63. /**Center value multiplier e.g. 1 x 1000 RPM*/
  64. multiplier : 1,
  65.  
  66. /**Label on guage Face*/
  67. gagueLabel : 'km/h'
  68. });

更新日志:

2022-07-11

  • JS更新

2022-07-07

  • JS更新

2021-06-24

  • JS更新

2021-03-16

  • JS更新

2018-03-15

  • CSS更新

2016-11-18

  • 缺少用于链接的对象引用

2016-08-26

  • JS更新

预览截图