jquery图形密码实现方法

 更新时间:2015年03月11日 15:13:20   作者:无冷  
这篇文章主要介绍了jquery图形密码实现方法,涉及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程序设计有所帮助。

相关文章

  • juery框架写的弹窗效果适合新手

    juery框架写的弹窗效果适合新手

    弹窗效果想必大家都有见到过吧,在本文将为大家介绍下使用juery框架来写个适合新手学习的弹窗效果
    2013-11-11
  • JQuery获得内容和属性方法解析

    JQuery获得内容和属性方法解析

    这篇文章主要介绍了JQuery获得内容和属性方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • 两种方法解决javascript url post 特殊字符转义 + & #

    两种方法解决javascript url post 特殊字符转义 + & #

    本文主要介绍javascript使用url传值的时候数据丢失的问题,希望对大家有所帮助。
    2016-04-04
  • jQuery插件pagination实现分页特效

    jQuery插件pagination实现分页特效

    jQuery分页插件示例,ajax方式的jQuery前端分页插件,其核心代码jquery.pagination.js已随示例打包,Demo中包括了5种不同的分页效果演示,全部是Ajax无刷新方式实现分页,对于搞前端开发的朋友来说,这是个值得收藏的代码特效,为以后实现无刷新分页提供方便。
    2015-04-04
  • 全面解析jQuery $(document).ready()和JavaScript onload事件

    全面解析jQuery $(document).ready()和JavaScript onload事件

    这篇文章主要介绍了全面解析jQuery $(document).ready()和JavaScript onload事件的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jquery图片滚动放大代码分享(2)

    jquery图片滚动放大代码分享(2)

    这篇文章主要介绍了jquery图片滚动放大效果,功能实现非常简单,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • JQuery 学习笔记 选择器之五

    JQuery 学习笔记 选择器之五

    测试代码如下,本例子中设置的着色比较多,哈,都是随便输些数字进去的,感觉这样更容易让大家看到效果,呵,如果我的讲的有哪不好麻烦大家多留言教导下^^
    2009-07-07
  • jquery插件实现悬浮的菜单

    jquery插件实现悬浮的菜单

    这篇文章主要为大家详细介绍了jquery插件实现悬浮的菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • jQuery获取Select选择的Text和Value(详细汇总)

    jQuery获取Select选择的Text和Value(详细汇总)

    Select选择的Text和Value在使用中可能都需要获取到它们的值,以至搜集用户的需求,本文整理了一些常用而实用的操作技巧,感兴趣的朋友可以了解下,就当巩固自己的知识了,希望本文对你有所帮助
    2013-01-01
  • jQuery UI Dialog控件中的表单无法正常提交的解决方法

    jQuery UI Dialog控件中的表单无法正常提交的解决方法

    研究了页面源码后发现,jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部、form元素的后面,而原始的Dialog模板部分(其内包含表单元素)也被移到了 动态生成的HTML元素内。
    2010-12-12

最新评论