이 기사의 예에서는 jquery 그래픽 비밀번호 구현 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. <br> $(document).ready(function() {<br> var n=0,y=['4','8','12','13','14','15','16'];<br> for(var i=1;i<=16;i++){<br /> var Box='<span id="box_'+i+'" class="box" num="0"></span>';<br> $('#lower').append(Box);<br> if(i<=4){<br /> $('#box_'+i+'').animate({left:100*i-100+"px"}, 0)<br /> .show(0).delay(i*400-400).animate({width:"90px",height:"90px",top:"300px"}, 800).attr("num",i);<br /> }else if(i<=8){<br /> $('#box_'+i+'').animate({left:100*i-500+"px"}, 0)<br /> .show(0).delay(i*400-400).animate({width:"90px",height:"90px",top:"200px"}, 800).attr("num",i);<br /> }else if(i<=12){<br /> $('#box_'+i+'').animate({left:100*i-900+"px"}, 0)<br /> .show(0).delay(i*400-400).animate({width:"90px",height:"90px",top:"100px"}, 800).attr("num",i);<br /> }else{<br /> $('#box_'+i+'').animate({left:100*i-1300+"px"}, 0)<br /> .show(0).delay(i*400-400).animate({width:"90px",height:"90px",top:"0px"}, 800).attr("num",i);<br /> }<br /> };<br /> $('#lower span').bind("click",function(){<br /> $(this).addClass("select");<br /> var code=$(this).attr("num");<br /> for (var j=0; j<y.length; j++){<br /> if(code==y[j]){<br /> y = jQuery.grep(y, function(n, i){<br /> return (n != code);<br /> });<br /> n=n+1;<br /> }else{<br /> n=n+0;<br /> }<br /> };<br /> if($('.select').length==7){<br /> if(n==7){<br /> $('#lower').empty().append('<a href="#"></a>');<br> $('#lower a').fadeIn(800);<br> }else{<br> $('#page').delay(1000).append('<div id="tips"><p>密码错了，重来吧！</p></div>');<br> $('#tips').slideDown(500).delay(2000).slideUp(500);<br> $('#lowerspan').removeClass("select");<br> n=0;<br> y=['4','8','12','13','14','15','16'];<br> }<br> ~ });<br> });<br> <br> </div> 이 기사가 모든 사람의 jquery 프로그래밍 설계에 도움이 되기를 바랍니다. <p></p>
