今天這里我們再介紹一款兼容性更好的動畫儀表盤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"
]
});
這里調用了一些常用的參數(shù),你可以設置相關儀表盤屬性。
完整代碼如下:
<!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>
使用是不是非常簡單,希望大家喜歡這個類庫。
本文來自成都品牌網(wǎng)站建設網(wǎng)站設計公司-創(chuàng)新互聯(lián)
網(wǎng)站欄目:關于超棒的儀表盤javascript類庫-justGage
文章網(wǎng)址:http://m.rwnh.cn/news45/309495.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供域名注冊、ChatGPT、移動網(wǎng)站建設、網(wǎng)站建設、云服務器、服務器托管
廣告
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源:
創(chuàng)新互聯(lián)