jquery圖形密碼實(shí)現(xiàn)方法

2024-05-06 16:16:32

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹了jquery圖形密碼實(shí)現(xiàn)方法,涉及jQuery操作圖形特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery圖形密碼實(shí)現(xiàn)方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

復(fù)制代碼代碼如下:

		<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>密碼錯(cuò)了，重來吧！</p></div>');
		                $('#tips').slideDown(500).delay(2000).slideUp(500);
		                $('#lower span').removeClass("select");
		                n=0;
		                y=['4','8','12','13','14','15','16'];
		            }
		        }   
		    });
		});
		</script>