一点点学习的心得-MetroJS
原文：http://zhangxiaolun.lofter.com/post/217084_73a1a9#
在最近的一个项目中，页面上有一部分由一些图片方块组成，要求说是：“做成类似动画的东东，最好可以亮瞎狗眼的那种……”。第一反应就是能不能做成Metro的那种，就像windows phone上面那样的磁铁效果。
google之，找到了一大坨推荐插件，什么Metro UI CSS啊， metro-bootstrap啊，不过感觉这些个都太强大了，大坨大坨的文件，眼花缭乱，短时间内难以接受。所以找到了一个比较简单的jQuery插件，叫做metroJS。至少看起来蛮简单的，使用的时候只要是三个文件
-
js文件：jQuery，插件包含的metro.js
-
css文件：插件包含的metro.css
http://www.drewgreenwell.com/projects/metrojs这个是插件的网站，上面有使用教程，还提供了自定义主题。不过是英文的，不知道国内有没有人翻译了使用文档，至少我还没有找到。所以今天下午回来之后就，硬着头皮一点点的开始看，废话不多说了，说多了都是汗，南昌真是太热了。
（以下内容只是个人见解，不对之处，欢迎指出！）
这个插件的核心方法就是：.liveTile([option]);所以的参数在html中都是以data-$属性的形式添加在html的标签中，eg：
<div class="live-tile red" id="slide" data-mode="fade" data-speed="2000">
</div>
.liveTile()提供了很多参数（以下列举出的不是全部，具体请前往官网查看）：
-
mode：瓷块切换形式，默认值：slide
-
speed：切换速度，默认值：500
-
direction：切换方向，默认值：vertical（垂直），还有一个值是horizontal
-
delay：动画切换之间的等待时间，默认值：5000
-
initDelay：动画开始之前的等待时间，默认值：-1
等等……
请看官网截图：
对我来说，能用上4，5个就足够了。
一个最简单的例子（插件官网的例子）：
<divclass="live-tile">
<div>front</div>
<div>back</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".live-tile").liveTile();
});
</script>
在官网上面，提供了不同效果的例子，
这篇博客只能算作是我的一些小小的笔记，难登大雅之堂，但是希望能够给需要的人提供一点点帮助，哪怕只有一点点。错误之处，欢迎指正
今天就到这里，以后尽量更新这个插件的使用心得。
我是一个小逗比~
