JavaScript 翻转计数器

Question

我想在我的网站上添加一个翻转计数器，类似于 Apple 在其 1 billion app countdown 中使用的计数器。 .

任何人都可以让他们的 JavaScript 独立工作吗？

如果有人可以提供工作代码，那就太好了。

Answer 1

他们使用 CSS 和 JavaScript 的组合。翻转动画由 CSS Sprite 提供支持类似技术。

首先，他们有一个非常高的图像，名为 filmstrip.png，其中包含每个数字的每个翻转“状态”(0 到 9；看看 a scaled-down detail，您就会发现明白我的意思)。

然后，在 HTML 中，每个数字都由三个嵌套元素组成:

• 第一个是容器元素，其 width 和 height 设置为单个翻转“状态”的尺寸，其 溢出设置为隐藏。该元素是相对定位的。

• 第二个元素是绝对定位的(并且因为第一个元素是相对定位的，所以第二个元素相对于第一个元素是绝对定位的)。

• 第三个元素的 background-image 设置为 filmstrip.png，其 width 和 height 设置为此图像的尺寸。

然后，JavaScript 似乎会快速更改第二个元素的 top 属性，导致 filmstrip.png 的不同部分相继暴露，从而导致翻转动画。

史蒂夫