个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
所以我构建了一个非常小的老式名片式时钟演示。图形来自免费 PSD，我使用 setInterval() 构建了时钟功能。您可以查看the live demo here .
我想做的是为数字的变化设置动画，以便顶部“翻转”向下以显示新数字。我确实不知道应该如何解决这个问题 - 我可以使用 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 library ，可以是 downloaded here 。单击每个数字即可旋转它。在 Firefox 11 和 Chromium 17 中测试； transform.js 应该做一些可以在旧版浏览器和 IE 中工作的事情。
顺便说一句，说到跨浏览器挑战，我最初有 <span> 上的三个数字。 s。这在 Firefox 中有效，但 Chrome 不会为它们设置动画!因此更改为<div>与float:left .
就像我说的，这只是解决方案的一半，因为它看起来还不太像翻转卡。我认为这可以通过一些屏蔽来完成，并在数字顶部创建一个临时 div(真正的 div 将具有下一个数字；前一个数字将位于顶部的临时 div 中)。但在时间耗尽之前我无法让它工作。
尽管如此，我仍然认为值得发布；尝试在动画中的rotateX旁边添加rotateY和rotateZ，以获得一些真正的扭曲效果。
关于jquery - 使用 jQuery 制作 Rolodex 向下翻转效果的动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10192260/
26
4
0
我正在努力根据那些带有翻转数字的旧时钟制作一个简单的动画。我在下面添加了一张从 Premium Pixels 上找到的免费赠品 PSD 复制的图片: 我遇到的最大问题是使用 jQuery 在 HTML
所以我构建了一个非常小的老式名片式时钟演示。图形来自免费 PSD，我使用 setInterval() 构建了时钟功能。您可以查看the live demo here . 我想做的是为数字的变化设置动画
我是一名优秀的程序员,十分优秀！