javascript代码实例教程-用jquery实现metro效果

发布时间:2019-02-27 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-用jquery实现metro效果脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 1.<head>标签需要依此引用Metrojs.css、jquery.js、metro.js,代码demo如下

<head>

&nbsp;   <;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>

 

下面贴出完整的代码:

 

 1 <!DOCTYPE html>

 2 <html XMlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 5     <title></title>

 6     <link href="http://www.drewgreenwell.com/content/metrojs.css" rel="stylesheet" />

 7     <script src="http://code.jquery.com/jquery-1.7.1.js"></script>

 8     <script src="http://www.drewgreenwell.com/scripts/metrojs.js"></script>

 9 </head>

10 <body>

11     <h1>简单的metro demo</h1>

12     <!--首先是一个p作为metro容器,容器内可以摆放多个liveTile(动态磁贴),class="black"表示用哪种风格,有其他的可以选择,官网现在支持custom了-->

13     <p class="blue">

14         <!--下面是第一个liveTile-->

15         <!--注意class="live-tile"哦,这个是可以随便改的,但要和下面的js $(".live-tile").liveTile();同步哦-->

16         <p class="live-tile"> 

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

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

19             <p>

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

21             </p>

22         </p>

23          <!--下面是第二个liveTile-->

24         <!--默认的高是150px,可以改的哦-->

25         <p class="live-tile" style="width:300px; height:300px">

26             <p>我是第二个liveTile</p>

27             <p>

28                 <p>下面放张图片试试</p>

29                 <img src=http://up.2cto.com/2013/0903/20130903114124367.gif" alt="我是百度哦" />

30             </p>

31         </p>

32     </p>

33     <script type="text/javascript">

34         $(document).ready(function () {

35             $(".live-tile").liveTile();

36         });

37     </script>

38 </body>

39 </html>

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-用jquery实现metro效果全部内容,希望文章能够帮你解决javascript代码实例教程-用jquery实现metro效果所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。