HTML5 Cancas加jQuery实现的温度计样式特效

今天分享一个Html5的Cancas温度计样式、本温度计是一款基于jQuery html5可以生成温度计的外观样式、并将指定的温度度数转换为温度计的颜色刻度、效果非常不错、并在载入的时候带有动画特效、下面是效果图、希望对大家有用

HTML代码如下

<article class="zzsc-container">
    <div class="zzsc-content bgcolor-20">
        <div class="tempGauge0">-10&deg;C</div>
        <div class="tempGauge0">0&deg;C</div>
        <div class="tempGauge1">10&deg;C</div>
        <div class="tempGauge1">20&deg;C</div>
        <div class="tempGauge2">30&deg;C</div>
        <div class="tempGauge2">50&deg;C</div>
        <div class="tempGauge3">34.4&deg;C</div>
        <div class="tempGauge3">-200&deg;C</div>
    </div>
</article>

引入样式和JS文件

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.tempgauge.js"></script>

JS代码

$(function(){
    $(".tempGauge0").tempGauge({width:60, borderWidth:3, showLabel:true, borderColor:"#f9f7f6"});
    $(".tempGauge1").tempGauge({width:70, borderWidth:3, showLabel:false, borderColor:"#f9f7f6"});
    $(".tempGauge2").tempGauge({width:150, borderWidth:4, borderColor:"#fff", fillColor:"#dcdcdc", showLabel:true});
    $(".tempGauge3").tempGauge({width:100, borderWidth:2, fillColor:"green",borderColor:"#f9f7f6"});
});

最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1mgB3y7e 密码: 4mrw