이 기사의 예에서는 jQuery가 개인화된 반전 효과 탐색 메뉴를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. jQuery 맞춤형 반전 효과 탐색 메뉴 <br> ul,li{list-style:none;padding:0;margin:0;}<br> #btncell{너비:300px;높이:100px;테두리:1px 단색 #777;여백:50px 자동;}<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 리 a{디스플레이:블록;높이:28px;테두리:2px 솔리드 #333;텍스트 장식:없음;너비:50px;배경:#888;오버플로:숨김;위치:절대;왼쪽:25px;상단:10px ;}<br> </스타일><br> <script type="text/javascript" src="js/jquery1.3.2.js"></script><br> <스크립트 언어="javascript"><br> var nummove=0;<br> var numout=0;<br> $(함수(){<br> $("#btncell li").hover(<br> 함수(){<br> If(nummove==0)<br> {<br> nummove=1;<br> $("a",this).animate({ height: "0px",top: "25px"}, 80,function(){nummove=0;});<br> $("a",this).animate({ height: "28px",top: "10px"}, 80);<br> $("a",this).css("배경","노란색");<br> }<br> },<br> 함수(){<br> If(numout==0)<br> {<br> numout=1;<br> $("a",this).animate({ height: "0px",top: "25px"}, 80,function(){numout=0;});<br> $("a",this).animate({ height: "28px",top: "10px"}, 80);<br> $("a",this).css("배경","#888");<br> numout=0;<br> }<br> }<br> )<br> $("#btncell li a").click(function(){<br> $(this).parents("li").css("z-index","2")<br> $(this).animate({ height: "558px",top: "-255px",width: "1000px",left: "-460px",opacity: 'toggle',lineHeight: '558px',fontSize: '500px '}, 1000);<br> $(this).animate({ height: "28px",top: "10px",width: "50px",left: "25px",opacity: 'toggle',lineHeight: '28px',fontSize: '12px'} , 400);<br> $(this).parents("li").css("z-index","1")<br> })<br> })<br> <br> </머리><br> <br> 효과 미리보기 시 왼쪽 하단에 오류가 발생하며, 새로고침 후 효과를 볼 수 없습니다. <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> <br> </본문><br> </div>
