jquery实现metro效果示例代码_Javascript教程-查字典教程网
jquery实现metro效果示例代码
jquery实现metro效果示例代码
发布时间:2016-12-30 来源:查字典编辑
摘要:1.标签需要依此引用metrojs.css、jquery.js、metro.js,代码demo如下复制代码代码如下:下面贴出完整的代码:复制...

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>

<>

<>

<div>

每一个liveTile都应该有两个div,分别作为两个画面

<div><a href="#">我是第一个liveTile</a></div>

<div>

<p>我是第一个liveTile的第二张脸哦.</p>

</div>

</div>

<>

<>

<div>

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类