jquery图形密码实现方法

263 阅读 0 评论 174 点赞

我是靠谱客的博主犹豫日记本，最近开发中收集的这篇文章主要介绍jquery图形密码实现方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例讲述了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>