編碼jQuery rolodex式時鐘翻轉動畫？

Question

我正在努力構建一個簡單的動畫基於那些舊時鐘與下拉數字。我添加了一個圖像下方的Premium像素髮現了一個免費搭乘PSD複製：

我運行到正在建設使用jQuery 一個「翻轉」動畫中的所有的HTML/CSS/JavaScript的最大的問題。我發現的唯一教程是from this net tuts+ article，它實際上使用圖像。它將該時鐘的頂部和底部半到兩個不同的圖像集並將其替換爲經過每一秒......

這種方法是不是在一個網站現實，因爲它提供了讀者沒有實際內容。我寧願將數字硬編碼爲HTML，並僅通過jQuery執行翻動動畫 - 最好不要使用除背景報價框之外的圖像。或者換句話說，號碼被編碼爲HTML，但時鐘本身是一系列rolodex樣式的bg圖像。

我希望我已經說明了這不夠好。我一直掙扎在這幾天，我真的不知道如何處理這個腳本。也許通過將上半部分和下半部分分成不同的div，然後更改每秒傳遞的內部數字？我在jQuery中相當富裕，但我在動畫方面很薄弱。

在此先感謝您的支持！

Answer 1

我想我會試圖做一些文本重複的頂部和底部。然後使用圖像和CSS來適當地顯示每一半。

下一步將創建文本與圖像翻轉的錯覺。我不確定你想怎麼做。我認爲這是一個大小和速度的問題。相對於圖像的文本大小以及從底部翻轉的速度。

動畫的最後部分是上半部分準備好下一個數字，下半部分完成。

我沒有任何實際的代碼可以幫助，但我希望這個概念能夠解決。

Answer 2

嘗試jQuery image rotate技術。