logo标签列表

JavaScript中的循环进度指示器

javascriptjquerycss
4
我有一个简单的轮播图来展示一些图片。如你所料，轮播图会在每x秒自动旋转。
我目前使用一个div，在x秒内通过动画来改变其宽度以显示进度条。这样用户可以看到还需要多长时间才能显示下一张图片。当用户将鼠标悬停在图片上时，进度条会缩小。当他们移开鼠标后，进度条会重新填充。
然而，我不想使用一个无聊的进度条，我想尝试使用一个圆形。就像在加载ajax时看到的旋转圆圈一样。我不知道该怎么做。
有人可以帮忙吗？这是否可能？
4个回答
4
生成一系列表示您想要表达的不同程度的图像，使区别精细化。您可以制作四个表示0％、25％、75％和100％“进度”的图像，或者制作一百个表示每1％差异的图像。
在JavaScript中，您可以替换当前进度量的适当图像，而不是更改条形的宽度。 if (progress & lt;25) image ='0percent.png'; （等等）。
在某些支持HTML 5的现代浏览器上可以做到不使用图像，但在任何其他地方都是完全不切实际的。
请注意，这与标准的“加载”图形非常不同。这些旋转器根本不表示进度，因为它们只会重复旋转，直到文档加载完毕。因此，旋转器被制作为动画GIF，因此单个图像可以简单地停留在页面上，快乐地旋转，直到其被移除。
我最后使用了setInterval来更新背景图片。非常感谢！ - Terry
4
为了避免进度指示器中每个步骤都有n个gif/png图片的混乱，创建一个包含所有步骤的单个精灵图，并将它们水平或垂直堆叠（例如，如果您的进度指示器为40x40并且您想显示8个步骤，则创建一个320x40的图像，从左到右依次按递增值排列）。
创建一个新元素，其尺寸固定为单个步骤的大小（在本例中为40x40），并将此精灵图作为其背景图像。
然后，当您从计时器（或setTimeout/Interval）接收到刻度时，通过一个步长（0、40、80、120等）移动背景图像的position-x属性。
这比为每个步骤单独使用一个图像要快得多，并且最终用户立即在第一个事件上预加载整个精灵图。
我会把它们放在一个正方形里而不是水平/垂直的方式...需要更多的数学计算才能实现，但使用模运算符相当容易。为什么这样做？我不知道...在Photoshop中查看更容易。 - mpen
听听！支持精灵和编程式精灵切换。+1 - Roy Tinker
2
你可以使用SVG或画布。
也有可以做到这一点的库（像this？）
理论上很好，但我有一台相当不错的机器（四核，4GB内存），尝试在极地时钟页面上使用Chrome开发者工具几乎让我的电脑死了！也许在未来几年内SVG会变得更加可行？ - Terry
这不是Chrome开发者工具的问题吗？或者说是其他什么问题？在我的Firefox中它运行得很好（使用双核CPU，甚至没有使用任何一个核心的100%）。 - Mewp
RaphaelJS兼容所有浏览器，甚至是IE6+。 - Roy Tinker
1

你激发了我制作一个手动控制的进度指示器。我在这里制作了一个演示。然后我开始调整并决定将其转化为插件。该插件包括计时器以及其他几个选项。看看插件演示，也许这对你有用？

酷炫演示。这是一个很好的方法！虽然我需要一个坚实的甜甜圈形状加载器，所以多个图像不能使用，但是这确实是一个非常好的方法！ - Terry
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接