编写一个jQuery的转盘式时钟翻转动画？

Question

6

我正在尝试构建一个基于旧式翻页数字时钟的简单动画。下面添加了一张图片，是从Premium Pixels上找到的免费PSD复制的： flip-clock PSD

我遇到的最大问题是使用jQuery在HTML/CSS/JavaScript中构建“翻转”动画。我找到的唯一教程是来自net tuts+文章的链接，该教程实际上使用图像。它将时钟的顶部和底部分成两个不同的图像集，并在每秒钟更换它们...

这种方法在网站上并不现实，因为它对读者没有实际的上下文。我更喜欢将数字硬编码到HTML中，并仅通过jQuery执行翻转动画 - 最好不使用图像，除了背景滚动框之外。或者换句话说，数字被编码到HTML中，但时钟本身是一系列卷轴式背景图像。

我希望我已经解释清楚了...我已经在这个问题上苦苦挣扎了几天，老实说我不知道如何处理这个脚本。也许可以将顶部和底部分成不同的div，然后在每秒钟更改内部数字？我在jQuery方面相当熟练，但是对于动画方面还很薄弱。

感谢您提前的支持！

- Jake

尝试使用jQuery图像旋转技术。 - BryanH

3

或许这可以作为一个开始...http://dabblet.com/gist/2360985 - Oscar Broman

@OscarBroman 不错，但看起来这是一个实验性的功能，在大多数版本中不受支持。 - Selvakumar Arumugam

大多数最新的浏览器都支持它，除了IE（像往常一样）。 - Oscar Broman

@OscarBroman 嘿，哇，伙计，你是用CSS3/HTML5编写的吗？没有使用jQuery吗？我想这样的东西可能会起作用。 - Jake

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kwelch · Answer 1

我认为我会尝试做一些文本在顶部和底部重复的事情。然后使用图像和CSS仅适当地显示每个部分。

下一步是创建文本与图像翻转的幻觉。我不确定您想如何实现这一点。我认为这是大小和速度的问题。文本相对于图像的大小以及从顶部翻转到底部的速度。

动画的最后一部分是使顶部准备好下一个数字，底部排队等待完成。

我没有任何实际的代码可以帮助，但我希望这个概念是可行的。