|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./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>
|
|
|
