jquery实现metro效果示例代码

1.<head>标签需要依此引用metrojs.css、jquery.js、metro.js,代码demo如下

代码如下:

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<link href="http://www.drewgreenwell.com/content/metrojs.css" rel="stylesheet" /> 
<script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
<script src="http://www.drewgreenwell.com/scripts/metrojs.js"></script> 
</head>

下面贴出完整的代码:

代码如下:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<link href="http://www.drewgreenwell.com/content/metrojs.css" rel="stylesheet" /> 
<script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
<script src="http://www.drewgreenwell.com/scripts/metrojs.js"></script> 
</head> 
<body> 
<h1>简单的metro demo</h1> 
<!--首先是一个div作为metro容器,容器内可以摆放多个liveTile(动态磁贴),class="black"表示用哪种风格,有其他的可以选择,官网现在支持custom了--> 
<div class="blue"> 
<!--下面是第一个liveTile--> 
<!--注意class="live-tile"哦,这个是可以随便改的,但要和下面的js $(".live-tile").liveTile();同步哦--> 
<div class="live-tile"> 
每一个liveTile都应该有两个div,分别作为两个画面 
<div><a href="#">我是第一个liveTile</a></div> 
<div> 
<p>我是第一个liveTile的第二张脸哦.</p> 
</div> 
</div> 
<!--下面是第二个liveTile--> 
<!--默认的宽高是150px,可以改的哦--> 
<div class="live-tile" style="width:300px; height:300px"> 
<div>我是第二个liveTile</div> 
<div> 
<p>下面放张图片试试</p> 
<img src="http://www.baidu.com/img/bdlogo.gif" alt="我是百度哦" /> 
</div> 
</div> 
</div> 
<script type="text/javascript"> 
$(document).ready(function () { 
$(".live-tile").liveTile(); 
}); 
</script> 
</body> 
</html>

想弄个iframe来显示效果,但没办法弄,而且很晚了,困,就不弄了,有兴趣的自己copy下代码吧

相关推荐