一点点学习的心得-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>

戳这里查看

在官网上面，提供了不同效果的例子，

点这里去官网查看例子

        这篇博客只能算作是我的一些小小的笔记，难登大雅之堂，但是希望能够给需要的人提供一点点帮助，哪怕只有一点点。错误之处，欢迎指正

        今天就到这里，以后尽量更新这个插件的使用心得。

        我是一个小逗比~