gpt4 book ai didi

javascript - 编写 jQuery rolodex 样式的时钟翻转动画?

转载 作者:数据小太阳 更新时间:2023-10-29 05:39:02 24 4
gpt4 key购买 nike

我正在努力根据那些带有翻转数字的旧时钟制作一个简单的动画。我在下面添加了一张从 Premium Pixels 上找到的免费赠品 PSD 复制的图片:

flip-clock PSD

我遇到的最大问题是使用 jQuery 在 HTML/CSS/JavaScript 中构建“翻转”动画。我找到的唯一教程是 from this net tuts+ article实际上使用图像。它将时钟的上半部分和下半部分分成两个不同的图像集,并为经过的每一秒替换它们......

这种方法在网站中是不现实的,因为它没有为读者提供实际的上下文。我更愿意将数字硬编码到 HTML 中并仅通过 jQuery 执行翻转动画 - 最好没有图像,除了背景自动收报机框。或者换句话说,数字 被编码成 HTML,但时钟本身是一系列 rolodex 风格的 bg 图像。

我希望我已经解释得足够好。我已经为此苦苦挣扎了几天,老实说,我不知道如何处理这个脚本。也许通过将上半部分和下半部分分成不同的 div,然后改变每一秒的内部数字?我在 jQuery 方面相当不错,但我在动画方面很薄弱。

在此先感谢您的支持!

最佳答案

我想我会尝试在顶部和底部复制文本。然后使用图像和 css 只适本地显示每一半。

下一步是创建文本随图像翻转的错觉。我不确定你想怎么做。我认为这是大小和速度的问题。文本相对于图像的大小以及它从上到下翻转的速度。

动画的最后一部分是让上半部分准备好下一个数字,下半部分在完成时排队。

我没有任何实际的代码可以提供帮助,但我希望这个概念能够奏效。

关于javascript - 编写 jQuery rolodex 样式的时钟翻转动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10110628/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com