JQMeter进度条动态加载演示
劳昊明
一、构建html(仅需要一个空的div即可)
<div id="jqmeter-container"></div>二、引入文件
JQmeter依赖于JQuery，所以引用文件的时候一定要先引入JQuery
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jqmeter.min.js"></script>jqmeter.min.js
下述代码直接创建命名为jqmeter.min.js,然后直接ctrl+a拷贝所有代码即可使用。
/*
Title: jQMeter: a jQuery Progress Meter Plugin
Author: Gerardo Larios
Version: 0.1.2
Website: http://www.gerardolarios.com/plugins-and-tools/jqmeter
License: Dual licensed under the MIT and GPL licenses.
*/
!function(e){e.fn.extend({jQMeter:function(t){t&&"object"==typeof t&&(t=e.extend({},e.jQMeter.defaults,t)),this.each(function(){new e.jQMeter(this,t)})}}),e.jQMeter=function(t,r){if(goal=parseInt(r.goal.replace(/\D/g,"")),raised=parseInt(r.raised.replace(/\D/g,"")),width=r.width,height=r.height,bgColor=r.bgColor,barColor=r.barColor,orientation=r.orientation,animationSpeed=r.animationSpeed,counterSpeed=r.counterSpeed,displayTotal=r.displayTotal,total=raised/goal*100,total>=100&&(total=100),"vertical"==orientation?(e(t).html('<div class="therm outer-therm vertical"><div class="therm inner-therm vertical"><span style="display:none;">'+total+"</span></div></div>"),e(t).children(".outer-therm").attr("style","width:"+width+";height:"+height+";background-color:"+bgColor),e(t).children(".outer-therm").children(".inner-therm").attr("style","background-color:"+barColor+";height:0;width:"+width),e(t).children(".outer-therm").children(".inner-therm").animate({height:total+"%"},animationSpeed)):(e(t).html('<div class="therm outer-therm"><div class="therm inner-therm"><span style="display:none;">'+total+"</span></div></div>"),e(t).children(".outer-therm").attr("style","width:"+width+";height:"+height+";background-color:"+bgColor),e(t).children(".outer-therm").children(".inner-therm").attr("style","background-color:"+barColor+";height:"+height+";width:0"),e(t).children(".outer-therm").children(".inner-therm").animate({width:total+"%"},animationSpeed)),displayTotal){var i=parseInt(height),n=i/2-13+"px 10px";"horizontal"!=orientation&&(n="10px 0"),e(t).children(".outer-therm").children(".inner-therm").children().show(),e(t).children(".outer-therm").children(".inner-therm").children().css("padding",n),e({Counter:0}).animate({Counter:e(t).children(".outer-therm").children(".inner-therm").children().text()},{duration:counterSpeed,easing:"swing",step:function(){e(t).children(".outer-therm").children(".inner-therm").children().text(Math.ceil(this.Counter)+"%")}})}e(t).append("<style>.therm{height:30px;border-radius:5px;}.outer-therm{margin:20px 0;}.inner-therm span {color: #fff;display: inline-block;float: right;font-family: Trebuchet MS;font-size: 20px;font-weight: bold;}.vertical.inner-therm span{width:100%;text-align:center;}.vertical.outer-therm{position:relative;}.vertical.inner-therm{position:absolute;bottom:0;}</style>")},e.jQMeter.defaults={width:"100%",height:"50px",bgColor:"#444",barColor:"#bfd255",orientation:"horizontal",animationSpeed:2e3,counterSpeed:2e3,displayTotal:!0}}(jQuery);
三、初始化插件和给予参数
假设当前需要总长度为1000，给当前进度也为1000，而进度条动画时间给5000ms，这样进度条从0到100%需要加载5秒，而进度条计数时间给6000ms，让进度条计数有稍微延迟完成的感觉。
<script>
$(document).ready(function(){
$('#jqmeter-container').jQMeter();
});
$('#jqmeter-container').jQMeter({
goal:'1000',//进度条总长度(指的是进度)，必须的参数
raised:'1000',//进度条当前进度，必须的参数
width:'200px',//显示的进度条的宽度
height:'50px',//显示的进度条的宽度
animationSpeed:5000,//进度条动画的时间
counterSpeed:6000,//进度条计数的时间'
});
</script>
四、更多参数
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| goal | string | 无默认值，必填参数 | 进度条的总长度。可以设置为字符串如"$9000"，或整数如:"9000" |
| raised | string | 无默认值，必填参数 | 进度条的当前进度。可以设置为字符串，如"$5000"，或整数，如:"5000" |
| width | string | 100%-水平宽度 | 设置进度条的水平宽度。可以设置为百分比或像素值 |
| height | string | 50px | 设置进度条的垂直高度。可以设置为百分比或像素值 |
| bgColor | string | #666 | 进度条的背景颜色。支持hex、rgba和颜色关键字 |
| barColor | string | #c0c0c0 | 进度条的颜色。支持hex、rgba和颜色关键字 |
| orientation | string | horizontal | 可设置为： 'horizontal' 或 'vertical'。如果设置为垂直进度条，该参数必须设置 |
| displayTotal | boolean | true | 是否显示进度条完成的百分比数 |
| animationSpeed | integer | 2000 | 进度条动画时间，单位毫秒 |
| counterSpeed | integer | 2000 | 进度条计数的时间，单位毫秒 |
dodo：查询，整理，总结，拉取资源不易，有帮助或解释烦请关注，点赞支持！！！
类似资料：