创意图像进度条插件 - jQuery ProgressBar

版本:

浏览量:1172

最后更新：2021-09-12

应用标签：MAC 软件 Jquery插件 git

推荐指数:

查看演示点击下载

详细信息

一个很小的创意 jQuery 插件，用于创建一个垂直进度条，填充 PNG 图像的高度以表示当前百分比。

如何使用它：

1.包含样式表progressbar.css中head，和JavaScriptjquery.progressbar.js的网页的底部。

<link rel="stylesheet" href="/path/to/progressbar.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.progressbar.js"></script>

2. 创建一个占位符，插件在其中呈现进度条。

<div id="example"></div>

3.在占位符元素上调用函数，指定图片路径如下：

var myProgress = $("#example").progressBar({
    imageUrl: 'image.png',
    imageHeight: 300,
    imageWidth: 250
});

4. 您也可以使用背景图片作为进度条。

var myProgress = $("#example").progressBar({
    imageUrl: 'image.png',
    imageHeight: 300,
    imageWidth: 250,
    backgroundImageUrl: 'bg.png',
    backgroundOpacity: 1
});

5.截至日期的进度条到一个新的价值。