百度云盘 传送门 密码:q6rt
柱状图动态百分比进度条效果
<html> <head> <title>jqbar.js柱状图动态百分比进度条特效</title> <link href="css/demo.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="css/jqbar.css" /> <style> p { position: fixed; top: 50%; left: 0; right: 0; text-align: center; transform: translateY(-50%); font-size: 40px; font-weight: 900; color: white; text-shadow: 0 0 50px black; text-transform: capitalize; font-family: 'Roboto','Helvetica','Arial',sans-serif; letter-spacing: 5px; } </style> </head> <body> <p>Gary</p> <div class="container"> <div class="sixteen columns"> <div class="row"> <h1>Horizontal Bars</h1> </div> </div> <div id="skillset" class="sixteen columns "> <div class="eight columns"> <div class="bars MT30"> <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> </div> </div> <div class="two columns"> </div> <div class="clearfix"> </div> </div> <div class="row"> </div> <div class="row clear"> </div> <div class="sixteen columns"> <div class="row"> <h1>Vertical Bars</h1> </div> </div> <div class="sixteen columns "> <div class="nine columns"> <div class="bars MT30"> <div id="bar-7"> </div> <div id="bar-8"> </div> <div id="bar-9"> </div> <div id="bar-10"> </div> <div id="bar-11"> </div> <div id="bar-12"> </div> </div> </div> </div> </div> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jqbar.js" type="text/javascript"></script> <script type="text/javascript"> $(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' }); $('#bar-7').jqbar({ label: 'Wal', value: 90, barColor: '#D64747', orientation: 'v' }); $('#bar-8').jqbar({ label: 'Ohi', barColor: '#FF681F', value: 70, orientation: 'v' }); $('#bar-9').jqbar({ label: 'Song', barColor: '#ea805c', value: 50, orientation: 'v' }); $('#bar-10').jqbar({ label: 'Pisho', barColor: '#88bbc8', value: 90, orientation: 'v' }); $('#bar-11').jqbar({ label: 'Mara', barColor: '#939393', value: 70, orientation: 'v' }); $('#bar-12').jqbar({ label: 'Dagha', barColor: '#3a89c9', value: 50, orientation: 'v' }); }); </script> </body> </html>
.jqbar{position: relative;top: 100px;}
.jqbar.vertical{text-align: center;display: inline-block;}
.jqbar.vertical span{display: block;font-size: 11px;font-weight: bold;}
.jqbar.vertical .bar-percent{font-size: 11px;font-weight: bold;position: absolute;height: 20px;margin-bottom: 5px; 100%;}
.jqbar.vertical .bar-level-wrapper{position: relative;display: inline-block;overflow: hidden;}
.jqbar.vertical .bar-level{position: absolute;}
/*horizontal*/
.jqbar.horizontal span{display: inline-block;margin-left: 5px;font-size: 11px;font-weight: bold;}
.jqbar.horizontal .bar-percent{font-size: 11px;font-weight: bold;height: 20px;margin-bottom: 5px;}
.container{background: #fff;color: #555;border: 0px solid #e2e2e2;} .container .one.column{ 40px;} .container .two.columns{ 100px;} .container .three.columns{ 160px;} .container .four.columns{ 220px;} .container .five.columns{ 280px;} .container .six.columns{ 340px;} .container .seven.columns{ 400px;} .container .eight.columns{ 460px;} .container .nine.columns{ 520px;} .container .ten.columns{ 580px;} .container .eleven.columns{ 640px;} .container .twelve.columns{ 700px;} .container .thirteen.columns{ 760px;} .container .fourteen.columns{ 820px;} .container .fifteen.columns{ 880px;} .container .sixteen.columns{ 940px;} .container .one-third.column{ 300px;} .container .two-thirds.column{ 620px;} #header.sixteen.columns{background: #d64747;margin: auto 0; 100%;padding-top: 30px;padding-bottom: 30px;} #header{position: relative;} .clearfix:before, .clearfix:after, .row:before, .row:after{content: ' 020';display: block;overflow: hidden;visibility: hidden; 0;height: 0;} .row:after, .clearfix:after{clear: both;}.row, .clearfix{zoom: 1;}/* You can also use a <br class="clear" /> to clear columns */ .clear{clear: both;display: block;overflow: hidden;visibility: hidden; 0;height: 0;} #header h1{text-align: left;font-size: 60px;letter-spacing: 1px;margin: 6px 0px 20px 0px;color: #fff;font-weight: normal;line-height: 28px;} .fleft{float: left;} h2{font-size: 22px;display: block;background-position: right center;padding-left: 0px;} h2{font-size: 20px;line-height: 22px;margin: 30px 0;}h1{font-size: 24px;line-height: 28px;} h1{font-family: "BebasNeueRegular" , Arial, Times New Roman, serif;} h2{display: inline-block;color: #d64747;background-position: left center;background-repeat: no-repeat;font-weight: normal;} .column, .columns{float: left;display: inline;margin-left: 10px;margin-right: 10px;}.row{margin-bottom: 20px;} #bar-1{top: 10px;} #bar-2{top: 20px;} #bar-3{top: 30px;} #bar-4{top: 40px;} #bar-5{top: 50px;} #bar-6{top: 60px;} #bar-7{top: 50px;left: 100px;} #bar-8{top: 50px;left: 120px;} #bar-9{top: 50px;left: 140px;} #bar-10{top: 50px;left: 160px;} #bar-11{top: 50px;left: 180px;} #bar-12{top: 50px;left: 200px;} .jqbar.horizontal .bar-label{text-align: right; 150px;}
实现过程
jqbar.js：实现柱状图动态显示进度条特效、可以设置横向、纵向柱状图展示
CSS
进度条位置
#bar-1{top: 10px;}
#bar-2{top: 20px;}
#bar-3{top: 30px;}
#bar-4{top: 40px;}
#bar-5{top: 50px;}
#bar-6{top: 60px;}
#bar-7{top: 50px;left: 100px;}
#bar-8{top: 50px;left: 120px;}
#bar-9{top: 50px;left: 140px;}
#bar-10{top: 50px;left: 160px;}
#bar-11{top: 50px;left: 180px;}
#bar-12{top: 50px;left: 200px;}
进度条演示
.clear{clear: both;display: block;overflow: hidden;visibility: hidden; 0;height: 0;}
clear：指定段落的左侧或右侧不允许浮动的元素
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
none 默认值。允许浮动元素出现在两侧
inherit 规定应该从父元素继承 clear 属性的值
.container .one.column{ 40px;}
控制 id 是container的div的宽度为40px
DOM
<script type="text/javascript"> $(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' }); $('#bar-7').jqbar({ label: 'Wal', value: 90, barColor: '#D64747', orientation: 'v' }); $('#bar-8').jqbar({ label: 'Ohi', barColor: '#FF681F', value: 70, orientation: 'v' }); $('#bar-9').jqbar({ label: 'Song', barColor: '#ea805c', value: 50, orientation: 'v' }); $('#bar-10').jqbar({ label: 'Pisho', barColor: '#88bbc8', value: 90, orientation: 'v' }); $('#bar-11').jqbar({ label: 'Mara', barColor: '#939393', value: 70, orientation: 'v' }); $('#bar-12').jqbar({ label: 'Dagha', barColor: '#3a89c9', value: 50, orientation: 'v' }); }); </script>
js.ready:不一定要等所有的js和图片加载完毕，就可以执行一些方法 传送门
JQuery的ready函数与JS的onload的区别：
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
在我以前的开发中，一般用到javascript，我都是采用jquery的模式，也就是大多数时候，第一行写的是：
$(document).ready(function(){
…
});
这个时候，不一定要等所有的js和图片加载完毕，就可以执行一些方法，不过有些时候，必须要等所有的
元素都加载完毕，才可以执行一些方法的时候，比如说，部分图片或者什么其他方面还没有加载好，这个时候，点击某些按钮，会导致出现意外的情况，这个时候，就
需要用到:
$(window).load(function() {
…
});
label：设置进度条名字
value：设置进度条进度值 (必须设置)
barColor：设置进度条颜色
orientation: 'v' ：横向进度条改为纵向进度条