发布于 2016-09-23 21:23:33 | 114 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例,程序狗速度看过来!

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。


metro效果想必大家并不陌生吧,下面为大家讲解下在jquery中时如何实现的,新手朋友们可不要错过了
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下代码吧

最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务