JavaScript翻转计数器
17 javascript animation counter flip
我想在我的网站上加一个翻转计数器,类似于苹果公司用于10亿次应用倒计时的计数器.
任何人都可以让他们的JavaScript独立工作吗？
如果任何人都可以提供工作代码,那就太好了.
Ste*_*son 25
他们使用CSS和JavaScript的组合.翻转动画由类似CSS Sprite的技术提供支持.
首先,它们有一个非常高的图像filmstrip.png,包含每个数字的每个翻转"状态"(0到9;看一下按比例缩小的细节,你会看到我的意思).
然后,在HTML中,每个数字由三个嵌套元素组成:
第一个是一个容器元素,其具有它的
width和height设置为单个倒装"状态",其尺寸overflow设置为hidden.该元素相对定位.第二个元素绝对定位(并且因为第一个元素相对定位,所以第二个元素相对于第一个元素绝对定位).
第三元件具有其
background-image设置为filmstrip.png,其width与height设置到该图像的尺寸.
然后JavaScript似乎迅速改变top第二个元素的属性,导致不同的部分filmstrip.png一个接一个地暴露,从而导致翻转动画.
史蒂夫
- 不,但我确实有Safari 4的Web Inspector(http://www.apple.com/safari/features.html#developer)...... (8认同)
- 你是史蒂夫乔布斯吗？;-) (4认同)
小智 23
在这里,准备在您自己的网页上实现 http://cnanney.com/journal/code/apple-style-counter-revisited/
- 仅供参考.这是一个比接受的答案要好得多的答案. (2认同)
| 归档时间： |
|
| 查看次数： |
27761 次 |
| 最近记录： |