带jQuery的循环进度指示器

我需要循环进度指示器。我应该如何实现这一点？带jQuery的循环进度指示器

我在寻找的是jQuery UI在他们的规划页面中有什么，但它尚未实现。我只是好奇，如果有人已经实施了这一点。见下图中的第6项。

alt text

http://wiki.jqueryui.com/ProgressIndicator

来源

2010-10-10 newbie

一样，one of these？你不需要插件。只需要.show()和.hide() GIF（或将其插入到DOM中，无论是否漂浮在您的船上）。

来源

2010-10-10 18:33:49 mpen

对不起我的问题是，也许有点太模糊，但我的意思是UI团队计划什么jUqery：http://wiki.jqueryui.com/ProgressIndicator看2 - 可视化设计6项。这种循环式的进展表明有多少先例已完成。 – newbie 2010-10-11 05:32:46

你在装什么东西？一个基本的例子是：

干杯

来源

2010-10-10 18:41:48 Claudiu

'＃load'的href应该是'/ path/to/animation.gif'，你应该在$（'＃load'）。click（...）'中使用'event.preventDefault（）'。 - 这样，如果用户禁用了JS，页面实际上可以有效地工作。 – 2010-10-10 20:27:22

所以，你说如果用户点击加载链接并看到动画（实际的.gif），如果他禁用了JS，那就意味着什么？ javascript：void（0）似乎工作得很好，即使在YouTube的API示例中也是如此......我认为没有什么比制作动画GIF更好。 – Claudiu 2010-10-10 20:37:03

不是jQuery的，但你可能想看看Raphaël JavaScript库，并在-特别是polar clock example，和“弧”自定义属性。我之前一直使用Raphaël和jQuery来生成一些静态的圆形进度条 - 它工作得非常好。

来源

2011-05-29 08:25:05

谢谢@ matt-austin这个库看起来非常酷。我将尝试实现一个小插件来执行带有基本选项和回调的简单定时循环动画。如果我遇到成功，我会在github上发布一个答案。 – 2011-08-31 00:48:51

您可以使用jQuery来滑动背景位置，并为其使用或创建适当的css sprite图像表。

当然你需要有100个精灵单元，然后你需要将背景位置坐标列表编译成多维数组/表/字典。

progressMeterSpriteCoords = [ 
{x: 0, y: 0},  //0% 
{x: -16, y: 0}, //1% 
{x: -32, y: 0}, //2% 
    ... etc etc.. 
{x: -320, y: -0}, //19% 
{x: 0, y: -16}, //20% 
{x: -16, y: -16}, //21% 
{x: -32, y: -16}, //22% 
    ... etc etc.. 
{x: -320, y: -16}, //29% 
    ... etc etc.. 
{x: -320, y: -320} //99% 
]

来源

2011-05-30 17:00:33 airtonix

带jQuery的循环进度指示器

回答

相关问题