HTML5 Cancas加jQuery实现的温度计样式特效
2015-11-16 12:54:46  By: shinyuu

• shinyuu
• JQuery教程
• 2
• 9898
• 5

今天分享一个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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛