JavaScript 翻转计数器 [英] JavaScript Flip Counter

问题描述

我想在我的网站上添加一个翻转计数器，类似于 Apple 用于其 的技术提供支持.

首先，他们有一个名为 filmstrip.png 的非常高的图像，其中包含每个数字(0 到 9；查看 缩小细节，你就会明白我的意思.

那么，在 HTML 中，每个数字由三个嵌套元素组成:

• 第一个是容器元素，它的 width 和 height 设置为单个翻转状态"的尺寸，并且它的 溢出 设置为hidden.这个元素是相对定位的.

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

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

然后 JavaScript 似乎迅速改变了第二个元素的 top 属性，导致 filmstrip.png 的不同部分依次暴露，从而导致翻转动画.

史蒂夫

I would like to include a flip counter on my site, similar to what Apple was using for their 1 billion app countdown.

Can anyone get their JavaScript to work standalone?

If anyone can provide working code, that would be great.

解决方案

They're using a combination of CSS and JavaScript. The flip animation is powered by a CSS Sprite-like technique.

First of all, they have a very tall image called filmstrip.png that contains every flip "state" for each number (0 to 9; have a look at a scaled-down detail and you'll see what I mean).

Then, in the HTML, each digit is made up of three nested elements:

• The first is a container element, which has its width and height set to the dimensions of a single flip "state", and its overflow set to hidden. This element is positioned relatively.

• The second element is positioned absolutely (and because the first element is positioned relatively, this second element is positioned absolutely relative to the first element).

• The third element has its background-image set to filmstrip.png, and its width and height set to the dimensions of this image.

The JavaScript then seems to rapidly change the top property of the second element, causing different parts of filmstrip.png to be exposed one after another, thus resulting in a flip animation.

Steve

这篇关于JavaScript 翻转计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！