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

更新時間：2015年03月11日 15:13:20 作者：無冷

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

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

<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>