使用jQuery为Rolodex Flip-Down效果制作动画
Jak*_*ake 5 jquery animation setinterval css-transitions jquery-animate
所以我已经建立了一个非常小的老式rolodex式时钟的演示.图形来自免费赠品PSD,我使用setInterval()构建了时钟功能.你可以在这里查看现场演示.
我正在尝试做的是动画数字的变化,以便顶部"翻转"以显示新的数字.我绝对不知道应该如何解决这个问题 - 我可以使用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库，可以在这里下载。单击每个数字即可旋转它。在 Firefox 11 和 Chromium 17 中测试；transform.js 应该做一些可以在旧浏览器和 IE 中工作的事情。
顺便说一句，说到跨浏览器挑战，我最初在 s 上有三个数字<span>。这在 Firefox 中有效，但 Chrome 不会为它们设置动画！<div>因此，将s更改为float:left。
就像我说的，这只是解决方案的一半，因为它看起来还不太像翻转卡。我认为这可以通过一些屏蔽来完成，并在数字顶部创建一个临时 div（真正的 div 将具有下一个数字；前一个数字将位于顶部的临时 div 中）。但在时间耗尽之前我无法让它发挥作用。
但我仍然认为值得发布；尝试在动画中的rotateX旁边添加rotateY和rotateZ，以获得一些真正的扭曲效果。
| 归档时间： |
|
| 查看次数： |
2658 次 |
| 最近记录： |