Contoh dalam artikel ini menerangkan cara jQuery melaksanakan menu navigasi kesan flip diperibadikan. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut: Salin kod Kod adalah seperti berikut: menu navigasi kesan flip diperibadikan jQuery <br> ul,li{list-style:none;padding:0;margin:0;}<br> #btncell{width:300px;height:100px;border:1px solid #777;margin:50px auto;}<br> #btncell li{width:100px;float:left;height:50px;font-size:14px;text-align:center;line-height:28px;position:relative;z-index:1;}<br> #btncell li a{display:block;height:28px;border:2px solid #333;text-decoration:none;width:50px;background:#888;overflow:hidden;position:absolute;left:25px;top:10px ;}<br> <br> var nummove=0;<br> var numout=0;<br> $(fungsi(){<br> $("#btncell li").tuding(<br> fungsi(){<br> Jika(nummove==0)<br> {<br> nummove=1;<br> $("a",ini).animate({ height: "0px",atas: "25px"}, 80,function(){nummove=0;});<br> $("a",ini).animate({ height: "28px",atas: "10px"}, 80);<br> $("a",ini).css("latar belakang","kuning");<br> }<br> },<br> fungsi(){<br> Jika(numout==0)<br> {<br> numout=1;<br> $("a",ini).animate({ height: "0px",atas: "25px"}, 80,function(){numout=0;});<br> $("a",ini).animate({ height: "28px",atas: "10px"}, 80);<br> $("a",ini).css("latar belakang","#888");<br> numout=0;<br> }<br> }<br> )<br> $("#btncell li a").klik(fungsi(){<br> $(this).parents("li").css("z-index","2")<br> $(this).animate({ height: "558px",atas: "-255px",lebar: "1000px",kiri: "-460px",opacity: 'togol',lineHeight: '558px',fontSize: '500px '}, 1000);<br> $(this).animate({ height: "28px",atas: "10px",lebar: "50px",kiri: "25px",opacity: 'togol',lineHeight: '28px',fontSize: '12px'} , 400);<br> $(this).parents("li").css("z-index","1")<br> })<br> })<br> </skrip><br> </head><br> <badan><br> Semasa pratonton kesan, ralat akan digesa di sudut kiri bawah, dan kesannya tidak dapat dilihat. Anda boleh melihat kesannya selepas menyegarkan. <ul id="btncell"><br> <li><a href="#">1</a></li><br> <li><a href="#">2</a></li><br> <li><a href="#">3</a></li><br> <li><a href="#">4</a></li><br> <li><a href="#">5</a></li><br> <li><a href="#">6</a></li><br> </ul><br> </body><br> </html><br> </div> <p>Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang. </p>