jQuery横向及纵向进度条插件

插件特效

2026-07-26 00:54 3 次浏览 • 0 次下载 2.6KB

插件描述：jQuery横向及纵向进度条插件,可控制速度，可设为递增递减进度，可繁可简，颜色尺寸随心所欲！简单使用，使用方法一应俱全。

使用方法

引用

<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" //进度条高度
});