用jQuery動畫化Rolodex翻轉效果

因此，我構建了一箇舊式的rolodex式時鐘的非常小的演示。圖形來自免費的PSD，我使用setInterval（）構建了時鐘功能。您可以查看the live demo here。用jQuery動畫化Rolodex翻轉效果

我想要做的是動畫數字的變化，使頂部「翻轉」下來顯示新的數字。我肯定失去了我應該如何去做這件事 - 我可以使用bg圖片，但是我覺得直接HTML中的數字更加用戶友好。任何人都可以爲我指出正確的方向嗎？我很樂意獲得任何幫助......我還在下面列出了一張預覽圖片，以便您瞭解我正在構建的內容。

另外我很樂意嘗試一個CSS3解決方案，但我還沒有找到一個比jQuery更好的工具。

jquery clock preview

來源

2012-04-17 Jake

[JavaScript翻轉計數器]的可能重複（http://stackoverflow.com/questions/746353/javascript-flip-counter） – Widor 2012-04-17 13:35:29

試試這個插件：http://www.littlewebthings.com/projects/countdown/example/ – 2012-04-17 13:36:10

@Widor是的，我確實發現了這一點，也是一個很好的例子[在這裏]（http://cnanney.com/journal/demo/apple-counter-revisited/）。然而，他們正在使用一大堆BG圖像，我想直接操縱HTML元素，並使用jQuery來扭曲/扭曲它們。我想我可以使用BG圖像 - 但是我在photoshop上並不擅長，所以我很謹慎地使用這種方法。 – Jake 2012-04-17 13:44:00

我承認這是隻有一半的答案;它展示瞭如何使用CSS/JQuery來動畫滾動效果。

<html> 
<head> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="transformjs.1.0.beta.2.min.js"></script> 
<style> 
body {font-size:128px;} 
</style> 
<script> 
$(function(){ //OnInit 

$('.anim').click(function() { 
    $(this).animate({ rotateX: '-='+(Math.PI/2), },500,"", 
    function(){ //OnComplete 
    var n=(parseInt($(this).html())+1)%10; //Turn 7 into 8, etc. 
    $(this).html(n.toString()); //Update number while it is hidden 
    $(this).animate({ rotateX: '+='+(Math.PI/2) },500); //Rotate it back 
    } 
);  
}); 


}); 
</script> 
</head> 
<body> 

<div class="anim" style="float:left">1</div><div class="anim" style="float:left">2</div><div class="anim" style="float:left">3</div> 
</body> 
</html>

它需要的JQuery 1.5.1+和transformjs library，其可以是downloaded here。單擊每個數字旋轉它。測試Firefox 11和Chromium 17; transform.js應該做一些可以在舊版瀏覽器和IE中使用的東西。

順便說一句，談到跨瀏覽器的挑戰，我最初有三個數字<span> s。這適用於Firefox，但Chrome不會爲它們製作動畫！因此更改爲<div>與float:left。

就像我說的那樣，它只是一半的解決方案，因爲它看起來不像翻轉卡。我認爲這可以通過一些掩飾來完成，並在數字之上創建一個臨時div（真正的div將有下一個數字;之前的數字將在該臨時div中）。但是，在我耗盡時間之前，我無法完成這項工作。

我仍然認爲這是值得發佈雖然;嘗試在動畫中添加一個rotateY和rotateZ，以及一些真正的kewl效果。

來源

2012-04-19 01:36:41

用jQuery動畫化Rolodex翻轉效果

回答

相關問題