基于jQuery，图片加载loading加载层动画开源库

简要说明

ProgressBar.js是一款jQuery图片加载loading加载层动画开源插件库。该插件库在图片加载时，为图片添加垂直的图片逐渐显示效果，非常炫酷。

代码教程

页面中引入

代码语言：javascript复制

<link rel="stylesheet" type="text/css" href="../src/progressbar.css">
<script type="text/javascript" src="../src/jquery.min.js"></script>     
<script type="text/javascript" src="../src/jquery.progressbar.js"></script>

HTML结构

代码语言：javascript复制

<table style="margin: 20px auto;">
<tr>
<td>
<div id="divDuck1">
</div>
</td>
<td>
Example 1.<br />
<p>A single image, when used on the background it has opacity applied to be only partially visible.</p>
<pre>var duckbar1 = $("#divDuck1").progressBar({
    imageUrl: 'images/duck.png',
    imageHeight: 290,
    imageWidth: 254
});

// to update percentage value to 15%
duckbar1.SetPercentage(15);
                </pre>
</td>
</tr>
<tr>
<td style="background-color: #2b2b2b">
<div id="divDuck2">
</div>
</td>
<td>
Example 2.<br />
<p>Same as above, but dark background.</p>
<pre>var duckbar2 = $("#divDuck2").progressBar({
    imageUrl: 'images/duck.png',
    imageHeight: 290,
    imageWidth: 254
});
                </pre>
</td>
</tr>
<tr>
<td>
<div id="divDuck3">
</div>
</td>
<td>
Example 3.<br />
<p>Having no background image (or making it totally transparent)</p>
<pre>var duckbar3 = $("#divDuck3").progressBar({
    imageUrl: 'images/duck.png',
    imageHeight: 290,
    imageWidth: 254,
    backgroundOpacity: 0
});
                </pre>
</td>
</tr>
<tr>
<td>
<div id="divBucket">
</div>
</td>
<td>
Example 4.<br />
<p>
Two different images; a 'full' and an 'empty', the background (or empty) image having no transparency
</p>
<pre>var bucketbar = $("#divBucket").progressBar({
    imageUrl: 'images/BucketFull.png',
    backgroundImageUrl: 'images/BucketEmpty.png',
    imageHeight: 146,
    imageWidth: 176,
    backgroundOpacity: 1
});
                </pre>
</td>
</tr>
<tr>
<td>
<div id="divPie">
</div>
</td>
<td>
Example 5.<br />
<p>NZ loves pies. I also love pies.</p>
<pre>var piesBar = $("#divPie").progressBar({
    imageUrl: 'images/nz-pies.png',
    backgroundImageUrl: 'images/nz-empty.png',
    imageHeight: 342,
    imageWidth: 233,
    backgroundOpacity: 1
});
                </pre>
</td>
</tr>
</table>
<div class="related">
</div>

javascript

普通垂直加载图片效果：

代码语言：javascript复制

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

引入背景图片

代码语言：javascript复制

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

javascript html jquery loading 插件

0 人点赞