[转]jQuery加载进度插件 - Percentage Loader

转自[url=http://site518.net]给力技术[/url] [url=http://site518.net/jquery-percentage-loader/]超给力的jQuery加载进度插件 - Percentage Loader[/url]

　　[url=http://site518.net/jquery-percentage-loader/]Percentage Loader[/url] 是一个基于 [url=http://site518.net/tag/jquery-2/]jQuery[/url] 开发的加载进度(百分比显示)插件，它有着非常吸引人眼球的外观，也非常易于使用。它也用到了目前很热门的 HTML5 canvas 技术，只要是支持 [url=http://site518.net/tag/html5/]HTML5[/url] 的浏览器都能运行此插件。如果你正好在寻找这样的插件，那么 [url=http://site518.net/jquery-percentage-loader/]Percentage Loader[/url] 会是一个相当不错的选择。
如何使用

　　首先引入 jQuery 框架和 Percentage Loader 插件的相关文件

<script src="jquery.min.js"></script>
<script src="jquery.percentageloader.min.js"></script>
<link rel="stylesheet" href="jquery.percentageloader.css"/>

　　然后在 HTML 页面的 body 中放置如下代码，用于展现加载进度

<div id="topLoader"></div>

　　之后就可以对它进行初始化了，可以使用 .setProgress() 和 .setValue() 来更新它的值，再借助 onProgressUpdate 这个回调方法就可以实现进度加载的动态效果

var $loader = $("#topLoader").percentageLoader({
width: 256,
height: 256,
controllable: true,
progress: 0.5,
onProgressUpdate: function (val) {
$loader.setValue(val * 100.0);
}
});

[url=http://site518.net/demo/jqloader/demo.htm]查看演示[/url]