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

在线预览   下载

 

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

 使用方法

在HTML文件中引入。

?

1 2 3

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

 HTML结构

?

1	< div id="container">

 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 });