jQuery仿翻牌效果菜單
08-04
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> #btnlist,#list { width:300px; height:100px; border:1px solid #333; margin:10px auto; } ul,li { list-style:none; padding:0; margin:0; } h2 { text-align:center; width:300px; border:1px solid #333; margin:0 auto; } #btnlist li,#list li { width:100px; float:left; height:50px; font-size:14px; line-height:28px; position:relative; z-index:1; text-align:center; } #btnlist li a,#list li a { display:block; height:28px; border:2px solid #e0e0e0; text-decoration:none; width:50px; background:#888; overflow:hidden; position:absolute; left:25px; top:10px; } </style> <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(function () { //橫翻 $("#btnlist li").hover( function () { $("a", this).animate({ width: "0px", left: "50px" }, 80); $("a", this).animate({ width: "50px", left: "25px" }, 80); $("a", this).css("background", "yellow"); }, function () { $("a", this).animate({ width: "0px", left: "50px" }, 80); $("a", this).animate({ width: "50px", left: "25px" }, 80); $("a", this).css("background", "#888"); }); $("#btnlist li a").click( function () { $(this).parents("li").css("z-index", "2") $(this).animate({ height: "558px", top: "-255px", width: "1000px", left: "-460px", opacity: "toggle", lineHeight: "558px", fontSize: "500px" }, 1000); $(this).animate({ height: "28px", top: "10px", width: "50px", left: "25px", opacity: "toggle", lineHeight: "28px", fontSize: "12px" }, 400); $(this).parents("li").css("z-index", "1") }); //豎翻 $("#list li").hover( function () { $("a", this).animate({ height: "0px", top: "25px" }, 80); $("a", this).animate({ height: "28px", top: "10px" }, 80); $("a", this).css("background", "yellow"); }, function () { $("a", this).animate({ height: "0px", top: "25px" }, 80); $("a", this).animate({ height: "28px", top: "10px" }, 80); $("a", this).css("background", "#888"); }); $("#list li a").click( function () { $(this).parents("li").css("z-index", "2") $(this).animate({ height: "558px", top: "-255px", width: "1000px", left: "-460px", opacity: "toggle", lineHeight: "558px", fontSize: "500px" }, 1000); $(this).animate({ height: "28px", top: "10px", width: "50px", left: "25px", opacity: "toggle", lineHeight: "28px", fontSize: "12px" }, 400); $(this).parents("li").css("z-index", "1") }); }); </script></head><body> <h2>橫翻</h2> <ul id="btnlist"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> </ul> <h2>豎翻</h2> <ul id="list"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> </ul></body></html>
推薦閱讀：
推薦閱讀：
※jQuery函數attr()和prop()的區別
※jQuery-原型鏈
※簡易版jQuery
※用jQuery完成表單驗證(2)驗證用戶ID