原文: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:

.liveTile()提供了很多参数(以下列举出的不是全部,具体请前往官网查看):

  • mode:瓷块切换形式,默认值:slide

  • speed:切换速度,默认值:500

  • direction:切换方向,默认值:vertical(垂直),还有一个值是horizontal

  • delay:动画切换之间的等待时间,默认值:5000

  • initDelay:动画开始之前的等待时间,默认值:-1

    等等……

请看官网截图:

一点点学习的心得-MetroJS-LMLPHP

对我来说,能用上4,5个就足够了。

一个最简单的例子(插件官网的例子):

戳这里查看

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

一点点学习的心得-MetroJS-LMLPHP

点这里去官网查看例子

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

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

我是一个小逗比~

05-11 23:03