Question

所以我建造了一个非常小的老式rolodex式时钟的演示。图形来自免费赠品PSD，我使用setInterval（）构建了时钟功能。您可以查看the live demo here。

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

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

jquery clock preview

Answer 1

我承认这只是答案的一半;它展示了如何使用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的东西。

BTW，谈到跨浏览器的挑战，我最初在<span> s上有三个数字。这适用于Firefox，但Chrome不会为它们制作动画！因此，使用<div>更改float:left。

就像我说的，这只是解决方案的一半，因为它看起来不像翻转卡。我认为这可以通过一些屏蔽完成，并在数字的顶部创建一个临时div（真正的div将具有下一个数字;前一个数字将在该临时div中，在顶部）。但是在我没时间用完之前我无法做到这一点。

我仍然认为值得张贴;尝试在动画中的rotateX旁边添加一个rotateY和rotateZ，以获得一些真正的反应效果。

使用jQuery为Rolodex Flip-Down效果制作动画

1 个答案: