Win8磁帖MetroUI（Jquery插件）资源-CSDN文库

共12个文件

png：7个

js：3个

html：1个

Win8

Metro

Jquery插件

5星 · 超过95%的资源需积分: 10 46 浏览量 2014-03-16 13:03:17 上传评论 1 收藏 159KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

Win8Metro.zip （12个子文件）

Metro

Scripts

jquery-1.8.2.js 269KB

JMetro.js 11KB

jquery-1.8.2.min.js 92KB

Win8Metro.html 8KB

img

H.png 2KB

F.png 2KB

G.png 2KB

D.png 936B

Thumbs.db 42KB

C.png 2KB

E.png 2KB

A.png 1KB

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>win8metro</title> <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script> <script src="Scripts/JMetro.js" type="text/javascript"></script> <style type="text/css"> ul { margin: 0; padding: 0; } div { margin: 0; padding: 0; } .metroCont { width: 740px; /*磁帖组容器,样式，类名完全由用户定义*/ float: left; padding: 2.5px; background-color: #000; left: 50%; margin-bottom: 5px; } .metro { overflow: hidden; /*滑动磁帖磁帖，样式，类名完全由用户定义*/ height: 180px; width: 180px; margin: 2.5px; float: left; color: #CCFFFF; background-color: #0000cc; } .imgMetro { overflow: hidden; /*旋转磁帖，样式，类名完全由用户定义.不应设置背景色*/ float: left; color: #CCFFFF; width: 180px; height: 180px; margin: 2.5px; } </style> </head> <body>   <h1>长按拖动,短按触发功能</h1> <div class="metroCont">    <input type="hidden" value="metro1,metro2,metro3" /> <ul class="imgMetro">  <img src="img/F.png" /> <img src="img/H.png" /> <img src="img/C.png" />  <a href="http://www.baidu.com"></a> </ul>  <div class="metro"> <div> <div style=" width:180px; height:180px;">  百度 </div> <span>一行字</span> </div> <a href="http://www.baidu.com">百百百百度度度度度</a>  <input type="hidden" value="#cc00CC" /> </div> <ul class="metro"> <div> <img width="180px" height="180px" src="img/G.png" /> <span style="color:#fff; top:60px; position:relative; display:block;">慎重操作</span> </div> <input type="button" onclick='javascript: alert("post或者get")' /> <input type="hidden" value="#7f7f7f" /> </ul> <ul class="metro"> <div> <img width="180px" height="180px" src="img/H.png" /> <span>个性色</span> </div> <input type="hidden" value="#CC0000" /> </ul> <ul class="metro"> <div> <img width="180px" height="180px" src="img/H.png" /> <br />7777 </div> </ul> <ul class="metro"> <div> <img width="180px" height="180px" src="img/F.png" /> 4444 <input type="hidden" value="#cc00CC" /> </div> <a href="http://www.baidu.com">aaaaaa</a> </ul> <ul class="metro"> <div> <img width="180px" height="180px" src="img/D.png" /> <div style="top: 200; width: 20; height: 20; border: 1px solide #000;"> 百度 </div> </div> <a href="http://www.baidu.com">百百百百度度度度度</a> </ul> <ul class="metro"> <div> <img width="180px" height="180px" src="img/A.png" /> 333333333333333 </div> <input type="button" value="按钮" onclick='javascript: alert("点击了一个按钮")' /> <input type="hidden" value="#cc00CC" /> </ul> <ul class="metro"> <div> 8888 </div> <input type="hidden" value="#f00" /> </ul> <ul class="metro" id="metro3"> <div> <div style="width:180px;height:180px;color:Red"> 0000 </div> <p style="color:Red">id="metro3" 前三个为排序后的磁帖当前磁帖设置了绿色的yo</p> </div> <input type="hidden" value="#0f0" /> </ul> <ul class="imgMetro" id="metro2"> <img src="img/D.png" /> <img src="img/A.png" /> </ul> <ul class="imgMetro" id="metro1">  <img src="img/A.png" /> <img src="img/D.png" /> <img src="img/E.png" /> <a href="http://www.baidu.com"></a> </ul> </div> <div class="metroCont">  <input type="hidden" value="bb,aa" /> <ul class="metro" id="aa"> <div> 1111 </div> </ul> <ul class="metro" id="bb"> <div> 2222 </div> </ul> </div> <script type="text/javascript"> //拖拽结束触发之,可选 function endFun(clickMetro) { //var clicker = $(clickMetro); //alert(clicker.css('background-color'));//输出当前磁帖颜色 } //jWin8metro({"dragEnd":拖拽结束});拖动等功能 //jMetroRun(第一次停留时间，第二次停留时间，磁帖长, 第一次滑动时间, 第二次滑动时间)。滑动 //jMetroTurn(磁帖长, 后翻时间, 前翻时间)。旋转 $(".metroCont").jWin8metro({ "dragEnd": endFun }).jMetroRun(3000, 3000, 180, 2000, 2000).jMetroTurn(180, 200, 250); </script> </body> </html>

评论收藏

内容反馈