jquery metro效果的实现代码

发布时间:2020-08-30编辑:脚本学堂
本文介绍下,用jquery实现 metro效果的一例代码,有兴趣的朋友,可以研究下。

在页面中实现 metro效果,需要按如下步骤操作。

1,<head>标签依此引用metrojs.css、jquery.js、metro.js。
代码:

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>metro效果--www.jb200.com</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>

2,完整代码

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>metro效果-www.jb200.com</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来显示下效果。