I need to code some html square "live tiles" that flip between 4 states periodically. Basically what I need is what this plug-in does http://www.drewgreenwell.com/projects/metrojs, but between 4 states, not just 2. Is there a definitive API/plug-in that allows live tile management in html/jquery sites? I'm not building a Windows 8 app, I'm just trying to simulate Live Tiles flipping in Html, and hopefully have it work in all major browsers. Thanks.
In the end, it seems that Drew's plug-in does support multiple tile states, he provided a couple of samples. Sample 1 and Sample 2. It seems to do what I need for live tile simulation.
I'm just trying to simulate Live Tiles flipping in Html, and hopefully have it work in all major browsers
I think this is what you need. Flip! http://lab.smashup.it/flip/
You might consider reading this article (below) on how to do flips with CSS3/HTML5 transitions. It's not Javascript (and thus doesn't have an API), but in my experience transition effects seem to be a little more reliable in their smoothness.
This should be pretty easy. Specifically:
- Create a DIV with your N tile-sized contents
- Clip it/size the parent div to 1 tile size
- Make sure that overflow is hidden.
- Apply translate's to the previous content & new content using CSS
Then everything should be fine.
You can use jQuery or jQuery UI to get this effect. jQuery has .animate(), .show(), .hide() and other methods that can help.
来源：https://stackoverflow.com/questions/11782237/simulating-flipping-live-tiles-in-html