jQuery_jquery를 사용하여 맞춤형 반전 효과 탐색 메뉴를 구현하는 방법

이 기사의 예에서는 jQuery가 개인화된 반전 효과 탐색 메뉴를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

jQuery 맞춤형 반전 효과 탐색 메뉴 ul,li{list-style:none;padding:0;margin:0;} #btncell{너비:300px;높이:100px;테두리:1px 단색 #777;여백:50px 자동;} #btncell li{width:100px;float:left;height:50px;font-size:14px;text-align:center;line-height:28px;position:relative;z-index:1;} #btncell 리 a{디스플레이:블록;높이:28px;테두리:2px 솔리드 #333;텍스트 장식:없음;너비:50px;배경:#888;오버플로:숨김;위치:절대;왼쪽:25px;상단:10px ;} var nummove=0; var numout=0; $(함수(){ $("#btncell li").hover( 함수(){ If(nummove==0) { nummove=1; $("a",this).animate({ height: "0px",top: "25px"}, 80,function(){nummove=0;}); $("a",this).animate({ height: "28px",top: "10px"}, 80); $("a",this).css("배경","노란색"); } }, 함수(){ If(numout==0) { numout=1; $("a",this).animate({ height: "0px",top: "25px"}, 80,function(){numout=0;}); $("a",this).animate({ height: "28px",top: "10px"}, 80); $("a",this).css("배경","#888"); numout=0; } } ) $("#btncell 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") }) })

효과 미리보기 시 왼쪽 하단에 오류가 발생하며, 새로고침 후 효과를 볼 수 없습니다. 1 2 3 4 5 6