jquery之使用 jQuery 制作 Rolodex 向下翻转效果的动画

所以我构建了一个非常小的老式名片式时钟演示。图形来自免费 PSD，我使用 setInterval() 构建了时钟功能。您可以查看the live demo here .

我想做的是为数字的变化设置动画，以便顶部“翻转”向下以显示新数字。我确实不知道应该如何解决这个问题 - 我可以使用 bg 图像，但我觉得直接 HTML 中的数字对用户更友好。有人能指出我正确的方向吗？我希望能得到任何帮助...我还在下面添加了预览图像，以便您可以了解我正在构建的内容。

我也愿意尝试 CSS3 解决方案，但到目前为止我还没有找到比 jQuery 更好的解决方案。

请您参考如下方法:

我承认这只是答案的一半；它展示了如何使用 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 中)。但在时间耗尽之前我无法让它工作。

尽管如此，我仍然认为值得发布；尝试在动画中的rotateX旁边添加rotateY和rotateZ，以获得一些真正的扭曲效果。