用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翻转效果

回答

相关问题