问题
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.
回答1:
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.
回答2:
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/
回答3:
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.
Animated Element Wall With CSS
回答4:
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.
回答5:
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