렌더링 1개
2 각 효과에 대한 자세한 설명
1. 심플한 타일
<span style="color: #0000ff"><</span><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><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><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>
2, 제목과 모서리가 있는 타일
<span style="color: #0000ff"><</span><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><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><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><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>
3, 그림 타일 세트
<span style="color: #0000ff"><</span><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><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><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">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">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">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">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>
3, 그림타일
<span style="color: #0000ff"><</span><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><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><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>
4, 페이지 넘김 동적 효과를 적용한 타일
<span style="color: #0000ff"><</span><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><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><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><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: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="http:www.baidu.com"</span><span style="color: #0000ff">><</span><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><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: #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>
5. 타일 스타일을 선택하세요
<span style="color: #0000ff"><</span><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>
6. 콘텐츠가 타일을 아래에서 위로 슬라이드합니다
<span style="color: #0000ff"><</span><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><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><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><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>
7, 콘텐츠가 위에서 아래로 슬라이드됩니다
<span style="color: #0000ff"><</span><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><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><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><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>
8, 콘텐츠가 왼쪽에서 오른쪽으로 슬라이드됩니다
<span style="color: #0000ff"><</span><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><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><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><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>
9, 정의 내용이 오른쪽에서 왼쪽으로 슬라이딩됩니다
<span style="color: #0000ff"><</span><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><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><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><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>
10, 확대효과
<span style="color: #0000ff"><</span><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><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><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>
11, 감소효과
<span style="color: #0000ff"><</span><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><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><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>
12, 상하 슬라이딩 효과
<span style="color: #0000ff"><</span><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><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><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><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>
13, ICon을 활용한 효과
3개의 소스 코드 주소
https://git.oschina.net/yudaming/metro
개인 홈페이지 4개(다양한 기술 홈페이지 공유 제공)
http://dmsite.chinacloudsites.cn/