5

所以我建立了一个非常小的老式rolodex风格时钟的演示。图形来自免费赠品 PSD，我使用 setInterval() 构建了时钟功能。您可以在此处查看现场演示。

我要做的是为数字的变化设置动画，以便顶部“翻转”以显示新数字。我绝对不知道该怎么做——我可以使用 bg 图像，但我觉得直接 HTML 中的数字对用户更友好。有人可以为此指出正确的方向吗？我希望能得到任何帮助......我还在下面提供了一张预览图片，以便您了解我正在构建的内容。

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

jquery 时钟预览

4

1 回答 1

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 库，可以在这里下载。单击每个数字以旋转它。在 Firefox 11 和 Chromium 17 中测试；transform.js 应该可以在旧版浏览器和 IE 中使用。

顺便说一句，说到跨浏览器挑战，我最初在<span>s 上有三个数字。这适用于 Firefox，但 Chrome 不会为它们设置动画！<div>因此，对s的更改为float:left。

就像我说的，这只是解决方案的一半，因为它看起来还不太像翻牌。我认为这可以通过一些掩蔽来完成，并在数字之上创建一个临时 div（真正的 div 将有下一个数字；前一个数字将在那个临时 div 的顶部）。但在我没时间之前，我无法让它工作。

不过，我仍然认为值得发布；尝试在动画中的 rotateX 旁边添加一个 rotateY 和 rotateZ，以获得一些真正的 kewl 效果。

于 2012-04-19T01:36:41.240 回答