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>
希望本文所述对大家的jquery程序设计有所帮助。