Bagaimana untuk melaksanakan menu navigasi kesan flip diperibadikan dengan jQuery_jquery

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 ul,li{list-style:none;padding:0;margin:0;} #btncell{width:300px;height:100px;border:1px solid #777;margin:50px auto;} #btncell li{width:100px;float:left;height:50px;font-size:14px;text-align:center;line-height:28px;position:relative;z-index:1;} #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 ;} var nummove=0; var numout=0; $(fungsi(){ $("#btncell li").tuding( fungsi(){ Jika(nummove==0) { nummove=1; $("a",ini).animate({ height: "0px",atas: "25px"}, 80,function(){nummove=0;}); $("a",ini).animate({ height: "28px",atas: "10px"}, 80); $("a",ini).css("latar belakang","kuning"); } }, fungsi(){ Jika(numout==0) { numout=1; $("a",ini).animate({ height: "0px",atas: "25px"}, 80,function(){numout=0;}); $("a",ini).animate({ height: "28px",atas: "10px"}, 80); $("a",ini).css("latar belakang","#888"); numout=0; } } ) $("#btncell li a").klik(fungsi(){ $(this).parents("li").css("z-index","2") $(this).animate({ height: "558px",atas: "-255px",lebar: "1000px",kiri: "-460px",opacity: 'togol',lineHeight: '558px',fontSize: '500px '}, 1000); $(this).animate({ height: "28px",atas: "10px",lebar: "50px",kiri: "25px",opacity: 'togol',lineHeight: '28px',fontSize: '12px'} , 400); $(this).parents("li").css("z-index","1") }) }) Semasa pratonton kesan, ralat akan digesa di sudut kiri bawah, dan kesannya tidak dapat dilihat. Anda boleh melihat kesannya selepas menyegarkan. 1 2 3 4 5 6 Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.