本文實例講述了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> $('#lower span').removeClass("select");<br> n=0;<br> y=['4','8','12','13','14','15','16'];<br> }<br> } <br> });<br> });<br> </div> <p>希望本文所述對大家的jquery程式設計有所幫助。 </p>
