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

问题描述

我想包括我的网站上翻盖柜台，类似于苹果用什么自己的 1十亿次软件下载倒计时。

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

任何人都可以得到他们的JavaScript工作的独立？

Can anyone get their JavaScript to work standalone?

的 如果任何人都可以提供工作code，这将是巨大的。的

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

推荐答案

他们使用CSS和JavaScript的组合。该翻转动画由 CSS雪碧供电般的技术。

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

首先，他们有一个叫做很高的图像 filmstrip.png 包含每个数字（0〜9每个翻转状态，看看< A HREF =htt​​p://i.stack.imgur.com/jwaVW.png>按比例缩小的细节，你就会明白我的意思）。

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).

然后，在HTML中，每个数字是由三个嵌套元素：

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).

第三个元素都有背景图片设置为 filmstrip.png ，其宽度和高度设置为此图像的尺寸。

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

中的JavaScript然后似乎迅速更改上方的第二个元素属性，从而导致 filmstrip.png 暴露了一个又一个，所以导致翻转动画。

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.

史蒂夫

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