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