[转]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]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值