JS框架_(JQbar.js)柱状图动态百分比进度条特效
百度云盘 传送门 密码: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;}
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)柱状图动态百分比进度条特效的更多相关文章
- JS框架_(JQuery.js)绚丽的3D星空动画
百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...
- JS框架_(JQuery.js)上传进度条
百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- JS框架_(coolShow.js)图片旋转动画特效
百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...
- JS框架_(Progress.js)圆形动画进度条
百度云盘 传送门 密码: 6mcf 圆形动画进度条效果: <!DOCTYPE html> <html lang="en"> <head> < ...
- JS框架_(Laydate.js)简单实现日期日历
百度云盘 传送门 密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...
- JS框架_(JQuery.js)圆形多选菜单选项
百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
- JS框架_(Popup.js)3D对话框窗口插件
百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...
- JS框架_(JQuery.js)纯css3进度条动画
百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <me ...
随机推荐
- spark教程(15)-Streaming
Spark Streaming 是一个分布式数据流处理框架,它可以近乎实时的处理流数据,它易编程,可以处理大量数据,并且能把实时数据与历史数据结合起来处理. Streaming 使得 spark 具有 ...
- 磁盘(disk)结构
- axios+FormData文件上传
axios+FormData文件上传 原理:FormData上传 创建一个FormData对象,将得到的文件流对象放在FormData内,然后使用axios上传 注意: 1.请求头设置 headers ...
- java 枚举enum的使用(与在switch中的使用)
实际开发中,很多人可能很少用枚举类型.更多的可能使用常量的方式代替.但枚举比起常量来说,含义更清晰,更容易理解,结构上也更加紧密.看其他人的博文都很详细,长篇大论的,这里理论的东西不说了,一起看看在实 ...
- RAD Studio 10 up1欢迎页证书不可用
不只是欢迎页,每打开一个新的工程,都会出现上面那个证书不可用的提示. 解决方法: 1.通过Fiddler网络监控软件分析发现,出现这个问题的原因是bds启动的时候会用https协议访问谷歌的统计服务器 ...
- Java 计算两点间的全部路径(二)
一.有向线段,存储开始点与结束点 /** * 有方向的线段 * * @author Gm * */ public class DirectionLine implements Cloneable { ...
- redis基础学习
redis 是一个高性能的key-value数据库. redis的出现,很大程度补偿了memcached这类keyvalue存储的不足,在部 分场合可以对关系数据库起到很好的补充作用.它提供了java ...
- 标准模板库(STL)
组件: 容器:管理某类对象的集合. 迭代器:用来在一个对象集合内遍历元素. 算法:处理集合内的元素. 容器 序列式容器:顾名思义.array,vector,deque,list 和 forward_l ...
- STL源码阅读-traits与迭代器
迭代器模式 提供一种方法,使之能够依序访问容器的各个元素,而又无需暴露容器的内部表述方式 STL设计的中心思想在于将数据容器和算法分离开,容器和算法分开设计,迭代器则是两者之间的胶着剂,一般迭代器的设 ...
- leetcode二刷结束
二刷对一些常见的算法有了一些系统性的认识,对于算法的时间复杂度以及效率有了优化的意识,对于简单题和中等题目不再畏惧.三刷加油