在线演示 当地下载
还记得前端时刻我们分享的动画仪表板javascript - gauge.js吧,行使它可以或许辅佐我们敏捷的构建一个超棒的动画仪表盘结果。
本日这里我们再先容一款兼容性更好的动画仪表盘javascript类库:JustGage,这个类库基于闻名的画图类库Raphaël ,可以或许提供更好的画图兼容性。
支持赏识器
险些支持全部的赏识器,包罗:
IE6+
Chrome
Firefox
Safari
Opera
Android
其余
怎样行使
行使很是简朴,起首导入Raphaël和JustGage的类库,如下:
<script src="js/raphael.2.1.0.min.js"></script> <script src="js/justgage.1.0.1.min.js"></script>
挪用js天生一个新的仪表盘:
var g1 = new JustGage({ id: "g1", value: getRandomInt(0, 30), min: 0, max: 100, title: "Speedometer", label: "km/h", levelColors: [ "#222222", "#555555", "#CCCCCC" ] });
这里挪用了一些常用的参数,你可以配置相干仪表盘属性。
完备代码如下:
<!doctype html>
<html> <head> <title>JustGage Demo By GBin1.com</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> body { text-align: center; font-family: Arial; } #g1 { width:400px; height:320px; display: inline-block; margin: 1em; border: 1px soild #202020; box-shadow: 0px 0px 15px #101010; margin-top: 120px; border-radius: 8px; } p { display: block; width: 400px; margin: 2em auto; text-align: center; border-top: 1px soild #CCC; border-bottom: 1px soild #CCC; background: #333333; padding:10px 0px; color: #CCC; text-shadow: 1px 1px 25px #000000; border-radius: 0px 0px 5px 5px; box-shadow: 0px 0px 10px #202020; } </style> <script src="js/raphael.2.1.0.min.js"></script> <script src="js/justgage.1.0.1.min.js"></script> <script> var g1; window.onload = function(){ var g1 = new JustGage({ id: "g1", value: getRandomInt(0, 30), min: 0, max: 100, title: "Speedometer", label: "km/h", levelColors: [ "#222222", "#555555", "#CCCCCC" ] }); setInterval(function() { g1.refresh(getRandomInt(80, 100)); }, 800); }; </script> </head> <body> <div id="g1"></div> <p> super cool speedometer demo by gbin1.com</p> </body> </html>
行使是不长短常简朴,但愿各人喜好这个类库,假如你有任何题目和提议,请到gbin1.com留言,感谢!
来历:超棒的仪表盘javascript类库 - justGage (编辑:河北网)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|