jQuery图片加载loading加载层动画插件

jQuery图片加载loading加载层动画插件

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

ProgressBar.js效果图-1
ProgressBar.js效果图-2

使用方法

在HTML文件中引入。

1
2
3
<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结构

1
2
3
<div id="container">
 
</div>

javascript

普通垂直加载图片效果:

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

使用背景图片:

1
2
3
4
5
6
7
var myProgress = $("#example").progressBar({
    imageUrl: 'image.png',
    imageHeight: 300,
    imageWidth: 250,
    backgroundImageUrl: 'bg.png',
    backgroundOpacity: 1
});
温馨提示:此处内容需要评论本文后才能查看。
0

评论:

1 条评论,访客:1 条,站长:0 条

发表评论