您的位置：首页 > Web前端 > JQuery

jquery实现metro效果示例代码

2018-10-12 14:03 639 查看

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下代码吧

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航