一点点学习的心得-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>
在官网上面,提供了不同效果的例子,
这篇博客只能算作是我的一些小小的笔记,难登大雅之堂,但是希望能够给需要的人提供一点点帮助,哪怕只有一点点。错误之处,欢迎指正
今天就到这里,以后尽量更新这个插件的使用心得。
我是一个小逗比~
最新文章
- Lattice Reduction (LLL) 算法C代码实现
- 二、Sink例程
- Redis学习——ae事件处理源码分析
- iOS 9 failed for URL: ";XXX://@"; - error: ";This app is not allowed to query for scheme XXX"; iOS 从APP里启动另一APP
- SharePoint 2013中Office Web Apps的一次排错
- php三维数组去重(示例代码)
- Eclipse 在线汉化
- mySQL中replace的用法
- OpenGL执行渲染图片的主要操作步骤
- Win7系统用户文件夹多出一个Administrator.xxx开头的文件怎么解决
- noip2017部分题目
- canvas-3radialGradient.html
- Mac中安装JDK1.8和JDK11双版本并任意切换
- typescript-koa-postgresql 实现一个简单的rest风格服务器 —— typescript 开发环境配置
- java Multimap
- python对json的操作总结 zz
- 【336】Tutorial of Endnote
- 【原创】java删除未匹配的文件夹FileFileFilter,FileUtils,删除目录名字不是某个名字的所有文件夹及其子文件夹
- 使用Zabbix的SNMP trap监控类型监控设备的一个例子
- JS原生带小白点轮播图