大佬教程收集整理的这篇文章主要介绍了使用jQuery为Rolodex Flip-Down效果制作动画，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在尝试做的是动画数字的变化,以便顶部“翻转”以显示新的数字.我绝对不知道应该如何解决这个问题 – 我可以使用bg图像,但我觉得直接HTML中的数字更加用户友好.有人能指出我正确的方向吗？我很乐意得到任何帮助……我还在下面列出了一张预览图片,这样你就可以了解我正在建造什么.
<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,可以是@L_801_12@.
点击每个数字进行旋转.在Firefox 11和Chromium 17中测试过; transform.js应该做一些适用于旧浏览器和IE的东西.
顺便说一句,谈到跨浏览器的挑战,我最初在< span> s上有三个数字.这适用于Firefox,但Chrome不会为它们制作动画！因此,使用float：left更改为< div> s.
就像我说的,它只是解决方案的一半,因为它看起来不像翻转卡.我认为这可以通过一些屏蔽完成,并在数字的顶部创建一个临时div(真正的div将具有下一个数字;前一个数字将在该临时div中,在顶部).但是在我没时间用之前我无法做到这一点.
以上是大佬教程为你收集整理的使用jQuery为Rolodex Flip-Down效果制作动画全部内容，希望文章能够帮你解决使用jQuery为Rolodex Flip-Down效果制作动画所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。