jQuery进度条插件JQMeter的简单使用
jQMeter是一款简单使用的轻量级进度条jQuery插件
效果图:该效果时设置了进度条宽度,高度,动画时间,计数时间,宽度,高度
使用过程
1.需要引入的js文件
基于jQuery的:<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
jQMeter的:<script type="text/javascript" src="jqmeter.js"></script>
JQMeter的js文件拷贝网址: http://www.gerardolarios.com/plugins-and-tools/jqmeter/
jQuery的js文件是从CDN中加载的
(为了方便,html文件和js文件是放在同一个目录下,好一点的结构可以将js文件放在另外单独建的js文件夹中)
2.html中写一个空div,设置id: <div id="jqmeter-container"></div>
3.在js中初始化进度条:
$(function(){$('#jqmeter-container').jQMeter({
goal:'1000',//进度条总长度(指的是进度),必须的参数
raised:'400',//进度条当前进度,必须的参数
width:'200px',//显示的进度条的宽度
height:'50px',//显示的进度条的宽度
animationSpeed:2000,//进度条动画的时间
counterSpeed:3000,//进度条计数的时间
});
})
这个一个比较简单的使用,更详细的一些学习可以参考网站:http://www.jq22.com/jquery-info5283
网站中会有插件的其他参数的介绍,垂直的进度条本人没有使用成功
所有代码截图: