最近在公司很闲，手头上的活都提前做好了，每天就是写博客、看博客，呵呵，老大见我没啥事做了，特地找了一个小项目给我做，真是一片好心啊，让我给公司的高层领导做一个报表查询统计系统，需求非常简单，就是在A页面用图片方式展示公司所有平台（可以切换成列表展示视图），每个平台一张图片，点击某个平台的图片，跳到B页面查询并展示该平台的报表，每个平台都要查询4张报表，然后可以导出到Excel，需求就是这么简单，本来想说我一天就能搞定的，但！！是！！，问题来了，由于该数据统计展示平台是给公司的高层领导用的，做的太丑会影响软件部的名声，老大希望我把平台做的越炫越好，要注重用户体验，尽量不要刷新页面，像桌面应用那样，而且最好是Metro风格的，好吧，你赢了，于是我便开始研究Metro风格。
以前没做过Metro风格的网页，这次花了半天研究了一下，发现其实Metro效果真的很容易做，只要一个页面就可以做出多屏滑动切换效果，原理大概是在页面上放置多个div，每个div代表一个屏，屏和屏之间放置切换按钮，点击按钮，用jquery的animate()动画函数控制div的left和right属性即可，然后，我用了几天时间把数据展示平台的基本功能都做出来了，加了很多的动画效果，图片和文字的切换基本上都加了动画，而且平台所有数据的交互都采用ajax方式，完全无刷新，应该说用户体验还是特别好的，今天录了个屏个大家分享一下成果，录屏软件比较垃圾，帧频不够，看上去比较卡，其实真实展示效果很流畅，大家凑合看吧，有需要源码的童鞋可以留下联系方式（注：平台中的色块就是以后放置各个平台的缩略图的）：
下面是动态效果展示图，由于平台用了比较高分辨率的背景图，，录屏软件的帧频太低，色彩还原度不足，所以录出来的动态图整个平台的色彩都花掉了，完全没法看，这里我就把背景图去掉，直接用背景色代替，所以大家就将就看吧：
每天告诉自己我很棒!
