jquery图形密码实现方法

<script type="text/javascript" src="js/jquery.min.js"></script>

　　<script type="text/javascript">

　　$(document).ready(function() {

　　var n=0,y=['4','8','12','13','14','15','16'];

　　for(var i=1;i<=16;i++){

　　var Box='<span id="box_'+i+'" class="box" num="0"></span>';

　　$('#lower').append(Box);

　　if(i<=4){

　　$('#box_'+i+'').animate({left:100*i-100+"px"}, 0)

　　.show(0).delay(i*400-400).animate({width:"90px",height:"90px",top:"300px"}, 800).attr("num",i);

　　}else if(i<=8){

　　$('#box_'+i+'').animate({left:100*i-500+"px"}, 0)

　　.show(0).delay(i*400-400).animate({width:"90px",height:"90px",top:"200px"}, 800).attr("num",i);

　　}else if(i<=12){

　　$('#box_'+i+'').animate({left:100*i-900+"px"}, 0)

　　.show(0).delay(i*400-400).animate({width:"90px",height:"90px",top:"100px"}, 800).attr("num",i);

　　}else{

　　$('#box_'+i+'').animate({left:100*i-1300+"px"}, 0)

　　.show(0).delay(i*400-400).animate({width:"90px",height:"90px",top:"0px"}, 800).attr("num",i);

　　}

　　};

　　$('#lower span').bind("click",function(){

　　$(this).addClass("select");

　　var code=$(this).attr("num");

　　for (var j=0; j<y.length; j++){

　　if(code==y[j]){

　　y = jQuery.grep(y, function(n, i){

　　return (n != code);

　　});

　　n=n+1;

　　}else{

　　n=n+0;

　　}

　　};

　　if($('.select').length==7){

　　if(n==7){

　　$('#lower').empty().append('<a href="#"></a>');

　　$('#lower a').fadeIn(800);

　　}else{

　　$('#page').delay(1000).append('<div id="tips"><p>密码错了，重来吧！</p></div>');

　　$('#tips').slideDown(500).delay(2000).slideUp(500);

　　$('#lower span').removeClass("select");

　　n=0;

　　y=['4','8','12','13','14','15','16'];

　　}

　　}

　　});

　　});

　　</script>