百度云盘　　传送门　　密码: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>

index.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;width: 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;}

jqbar.css

.container{background: #fff;color: #555;border: 0px solid #e2e2e2;}

.container .one.column{width: 40px;}

.container .two.columns{width: 100px;}

.container .three.columns{width: 160px;}

.container .four.columns{width: 220px;}

.container .five.columns{width: 280px;}

.container .six.columns{width: 340px;}

.container .seven.columns{width: 400px;}

.container .eight.columns{width: 460px;}

.container .nine.columns{width: 520px;}

.container .ten.columns{width: 580px;}

.container .eleven.columns{width: 640px;}

.container .twelve.columns{width: 700px;}

.container .thirteen.columns{width: 760px;}

.container .fourteen.columns{width: 820px;}

.container .fifteen.columns{width: 880px;}

.container .sixteen.columns{width: 940px;}

.container .one-third.column{width: 300px;}

.container .two-thirds.column{width: 620px;}

#header.sixteen.columns{background: #d64747;margin: auto 0;width: 100%;padding-top: 30px;padding-bottom: 30px;}

#header{position: relative;}

.clearfix:before, .clearfix:after, .row:before, .row:after{content: '\0020';display: block;overflow: hidden;visibility: hidden;width: 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;width: 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;width: 150px;}

demo.css

实现过程

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;width: 0;height: 0;}
clear：指定段落的左侧或右侧不允许浮动的元素
　　left 在左侧不允许浮动元素

　　right 在右侧不允许浮动元素

　　both 在左右两侧均不允许浮动元素

　　none 默认值。允许浮动元素出现在两侧

　　inherit 规定应该从父元素继承 clear 属性的值

.container .one.column{width: 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() {

…

});

JQuery的ready函数与JS的onload的区别

label：设置进度条名字

value：设置进度条进度值　　(必须设置)

barColor：设置进度条颜色

orientation: 'v' ：横向进度条改为纵向进度条

JS框架_(JQbar.js)柱状图动态百分比进度条特效的更多相关文章

  1. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  2. JS框架_(JQuery.js)上传进度条

    百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  3. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  4. JS框架_(Progress.js)圆形动画进度条

    百度云盘 传送门 密码: 6mcf 圆形动画进度条效果: <!DOCTYPE html> <html lang="en"> <head> < ...

  5. JS框架_(Laydate.js)简单实现日期日历

    百度云盘 传送门 密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...

  6. JS框架_(JQuery.js)圆形多选菜单选项

    百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...

  7. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  8. JS框架_(Popup.js)3D对话框窗口插件

    百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...

  9. JS框架_(JQuery.js)纯css3进度条动画

    百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <me ...

随机推荐

  1. c++学习笔记之类和对象（二、构造函数和析构函数）

    1.构造函数(Constructor):在C++中,有一种特殊的成员函数,它的名字和类名相同,没有返回值,不需要用户显式调用(用户也不能调用),而是在创建对象时自动执行. 这种特殊的成员函数就是构造函 ...

  2. python打印带颜色的字体

    在python开发的过程中,经常会遇到需要打印各种信息.海量的信息堆砌在控制台中,就会导致信息都混在一起,降低了重要信息的可读性.这时候,如果能给重要的信息加上字体颜色,那么就会更加方便用户阅读了. ...

  3. @Value中冒号的作用

    先说明冒号的作用 :可以设置默认值 @Value中可以使用 @Value("${hello:defaultValue}") private String hello; 若找不到属性 ...

  4. 程序员必备的网站之Tutorialspoint

    程序员必备的网站之Tutorialspoint 给大家介绍一个非常好的网站Tutorialspointhttp://www.tutorialspoint.com/index.htm,也许好多人都已经用 ...

  5. linux环境下tomcat启动成功，部分请求页面出现404

    这种情况很多,本文记录我遇到比较奇葩的情况. 第一种情况: 第一次tomact启动成功,访问404,乱捣鼓不知怎么好了:第二次tomcat启动成功,可以访问部分链接,有些却报404,但是代码和数据都还 ...

  6. golang（5）：struct & 链表 & 二叉树 & 接口

    struct : 结构体 // 1. 用来自定义复杂数据结构 // 2. struct里面可以包含多个字段(属性) // 3. struct类型可以定义方法,注意和函数的区分 // 4. struct ...

  7. LOJ题解#136. 最小瓶颈路 DFS+Kruskal

    题目链接: https://loj.ac/problem/136 思路: 在我的这篇博客中已经讲到什么是最短瓶颈路,同时给出了一个用Kruskal求最短瓶颈路的一个简洁易懂的方法,然而这道题目可以看作 ...

  8. yii自定义验证

    自定义验证类 class BaseModel extends Model { public function rules() { return [ ['obj', ContentSecurityVal ...

  9. 07 Deque的应用案例-回文检查

    - 回文检测:设计程序,检测一个字符串是否为回文. - 回文:回文是一个字符串,读取首尾相同的字符,例如,radar toot madam. - 分析:该问题的解决方案将使用 deque 来存储字符串 ...

  10. bilibili小程序项目总结

    1.关于mock的使用 第一步:先到Mock官网(http://mockjs.com/)上面熟悉一下基本用法 第一步:具体使用实例: 下载wxMock.js和mock.js文件 下载地址:https: ...