模拟在html中翻转活动磁贴

Question

我需要编写一些html方形“活动磁贴”，它可以定期在4种状态之间切换。 基本上我需要的是这个插件的作用http://www.drewgreenwell.com/projects/metrojs，但是在4个状态之间，而不仅仅是2个。 是否有确定的API /插件允许在html / jquery站点中进行实时磁贴管理？ 我不是在构建一个Windows 8应用程序，我只是想模拟在Html中翻转的Live Tiles，并希望它能在所有主流浏览器中运行。 感谢。

Answer 1

最后，似乎Drew's plug-in确实支持多个瓦片状态，他提供了几个样本。 Sample 1和Sample 2。它似乎做了我需要的实时平铺模拟。

Answer 2

  

我只是想模拟在Html中翻转的Live Tiles，和   希望它能在所有主流浏览器中运行

我认为这就是你所需要的。 翻转！ http://lab.smashup.it/flip/

Answer 3

您可以考虑阅读本文（如下），了解如何使用CSS3 / HTML5过渡进行翻转。它不是Javascript（因此没有API），但根据我的经验，过渡效果在平滑性方面似乎更可靠。

Animated Element Wall With CSS

Answer 4

这应该很简单。具体做法是：

• 使用N个磁贴大小的内容创建DIV
• 将父级div剪裁/调整为1个图块大小
• 确保隐藏溢出。
• 将翻译应用于之前的内容＆amp;使用CSS的新内容

然后一切都会好起来的。

Answer 5

您可以使用jQuery或jQuery UI来获得此效果。 jQuery有.animate()，.show()，.hide()以及其他可以提供帮助的方法。