引用
<link rel="stylesheet" href="css/schedule.css"> <script src="js/jquery-3.0.0.min.js"></script> <script src="js/schedule.js"></script>
html
<!--横向进度条--> <div id="scheduleX"></div> <!--纵向进度条--> <div id="scheduleY"></div>
调用对应进度条函数
/*纵向进度条*/ scheduleY({ fulfill: 55, //选择数 listAll: 100, //总数 speed: 25, //动画速度,可选,默认25,越小越快 again: false, //选择数改变动画是否从零开始,默认true bgColor: "#828282", //底部颜色 listColor: "#5bcde7", //伸缩条颜色,默认原谅绿 scWidth: "25", //进度条宽度 scHeight: "300" //进度条高度 });
/*横向进度条*/ scheduleX({ fulfill: 60, //选择数 listAll: 100, //总数 speed: 25, //动画速度,可选,默认25,越小越快 again: false, //选择数改变动画是否从零开始,默认true从零开始 bgColor: "#828282", //底部颜色 listColor: "#ffa439", //伸缩条颜色,默认原谅绿 scWidth: "400", //进度条宽度 scHeight: "25" //进度条高度 });