二 各个效果的详解
1，简单磁贴
<div class="tile" data-role="title"> <div class="tile-content iconic"> <icon /> div> div>
2，带有标题和边角的磁贴
<div class="tile"> <div class="tile-content"> <span class="tile-label">Labelspan> <span class="tile-badge">5span> div> div>
3，一组图片的磁贴
<div class="tile"> <div class="tile-content image-set"> <img src="images/1.jpg"> <img src="images/1.jpg"> <img src="images/1.jpg"> <img src="images/1.jpg"> <img src="images/1.jpg"> div> div>
3,一张图片的磁贴
<div class="tile"> <div class="tile-content"> <img src="images/1.jpg" data-role="fitImage" data-format="square"> div> div>
4，带有翻页动态效果的磁贴
<div class="tile"> <div class="tile-content"> <div class="carousel" data-role="carousel"> <div class="slide"><a href="http:www.baidu.com"><img src="images/1.jpg">a>div> <div class="slide"><img src="images/1.jpg">div> div> div> div>
5，选择样式的磁贴
<div class="tile element-selected"> 12321321 div>
6，内容由下向上滑动磁贴
<div class="tile"> <div class="tile-content slide-up"> <div class="slide"> ... Main slide content ... div> <div class="slide-over"> ... Over slide content here ... div> div> div>
7,内容由上向下滑动
<div class="tile"> <div class="tile-content slide-down"> <div class="slide"> ... Main slide content ... div> <div class="slide-over"> ... Over slide content here ... div> div> div>
8，内容由左向右滑动
<div class="tile"> <div class="tile-content slide-left"> <div class="slide"> ... Main slide content ... div> <div class="slide-over"> ... Over slide content here ... div> div> div>
9，定义内容是由右向左滑动
<div class="tile"> <div class="tile-content slide-right"> <div class="slide"> ... Main slide content ... div> <div class="slide-over"> ... Over slide content here ... div> div> div>
10，放大效果
<div class="tile"> <div class="tile-content zooming"> <div class="slide"> ... Slide content here ... div> div> div>
11，缩小效果
<div class="tile"> <div class="tile-content zooming-out"> <div class="slide"> ... Slide content here ... div> div> div>
12，上下滑动的效果
<div class="tile-wide" data-role="tile" data-effect="slideUpDown"> <div class="tile-content"> <div class="live-slide">...slide content...div> ... <div class="live-slide">...slide content2...div> div> div>
13，使用ICon的效果
三 源码地址
https://git.oschina.net/yudaming/metro
四 个人小站(提供各种技术类网站分享)
http://dmsite.chinacloudsites.cn/
