所属分类:网页特效-表格
demo.css里面的样式根据自己的需求需要改一下
<link href="css/demo.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/jqbar.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jqbar.js" type="text/javascript"></script>
$(document).ready(function () {
$('#bar-1').jqbar({ label: 'ASP.NET', value: 99, barColor: '#D64747' });
$('#bar-2').jqbar({ label: 'C#', value: 59, barColor: '#FF681F' });
$('#bar-3').jqbar({ label: 'Javascript', value: 90, barColor: '#ea805c' });
$('#bar-4').jqbar({ label: 'HTML5', value: 50, barColor: '#88bbc8' });
$('#bar-5').jqbar({ label: 'CSS3', value: 60, barColor: '#939393' });
$('#bar-6').jqbar({ label: 'jQuery', value: 70, barColor: '#3a89c9' });
});
<div id="bar-1"></div>
<div id="bar-2"></div>
<div id="bar-3"></div>
<div id="bar-4"></div>
<div id="bar-5"></div>
<div id="bar-6"></div>