chibimarukochan
chibimarukochan

温度计样式

jquery-tempgauge是一款基于HTML5 的jQuery温度计插件。使用该插件可以生成温度计的外观样式，并将指定的温度度数转换为温度计的颜色刻度。

使用方法

使用该温度计插件需要引入jQuery和jquery.tempgauge.js文件。

HTML

该温度计的HTML结构非常简单：使用一个< div >元素来包裹需要转换的温度文本。

    
-20°C

    
-10°C

    
10°C

    
30°C

    
33.5°C

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该温度计插件。

  $(".tempgauge0").tempGauge({ width:55, borderWidth: 3, showLabel: false, borderColor: "#3c8dbc" });
  $(".tempgauge1").tempGauge({ width:65, borderWidth: 3, showLabel: false, borderColor: "#3c8dbc" });
  $(".tempgauge2").tempGauge({ width:75, borderWidth: 3, showLabel: false, borderColor: "#3c8dbc" });
  $(".tempgauge3").tempGauge({ width:85, borderWidth: 3, showLabel: false, borderColor: "#3c8dbc" ,fillColor:"green",});
  $(".tempgauge4").tempGauge({ width:95, borderWidth: 4, showLabel: false, borderColor: "#3c8dbc",fillColor:"green", });

配置参数

该温度计插件的可用配置参数有：

borderColor：温度计边框颜色，默认值为black。

borderWidth：温度计的边框宽度，默认值为4。

defaultTemp：默认的温度值，默认值为26。

fillColor：填充颜色，默认值为red。

labelSize：标签文字的大小，默认值为12。

maxTemp：最大温度值，默认值为100。

minTemp：最小温度值，默认值为40。

showLabel：是否显示温度标签，默认值为false。

width：画布的宽度，默认值为100。

效果图

温度计样式_第1张图片


你可能感兴趣的:(web前端)