利用jQuery实现登录框拼图滑块验证代码



12 47 16



特效描述:利用jQuery实现 登录框 拼图滑块 验证代码,利用jQuery实现登录框拼图滑块验证代码

代码结构

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery-1.10.2.js"></script>
<script src="js/img_ver.js"></script>

3. HTML代码

<div class="logo-box">
<div class="login" style="">
<div class="bxs-row" style="text-align:center;">
<img id="logo" src="images/logo.jpg" style="width:72px;"><span class="tips" style="color:red;">忍住不哭来段口技</span>
</div>
<div class="bxs-row">
<input type="text" class="username" placeholder="用户名" value="admin">
<p class=" err err-username"></p>
</div>
<div class="bxs-row">
<input type="password" class="password" placeholder="密码">
<p class="err err-password"></p>
</div>
<div class="bxs-row">
<input type="submit" class="submit btn" value="登录">
</div>
</div>
<div class="verBox">
<div id="imgVer" style="display:inline-block;"></div>
</div>
</div>
<script>
        imgVer({
            el:'$("#imgVer")',
            width:'260',
            height:'116',
            img:[
                'images/ver.png',
                'images/ver-1.png',
                'images/ver-2.png',
                'images/ver-3.png'
            ],
            success:function () {
                //alert('执行登录函数');
                $(".login").css({
                    "left":"0",
                    "opacity":"1"
                });
                $(".verBox").css({
                    "left":"404px",
                    "opacity":"0"
                });
                $(".tips").html('你是不是不知道账号密码!???');
                $("#logo").attr("src",'images/login-err.png')
            },
            error:function () {
                //alert('错误什么都不执行')
            }
        });
        $(".submit").on('click',function () {
            if($(".username").val() == '') {
                // $(".err-username").html('杂种!!你用户名呢!???');
                $(".tips").html('老兄!!你用户名呢!???');
                $("#logo").attr("src",'images/null-username.jpg')
            } else if($(".password").val() == '') {
                // $(".err-password").html('畜生!!你密码呢!???');
                $(".tips").html('老兄!!你密码呢!???');
                $("#logo").attr("src",'images/null-password.jpg')
            } else {
                $(".login").css({
                    "left":"-404px",
                    "opacity":"0"
                });
                $(".verBox").css({
                    "left":"0",
                    "opacity":"1"
                })
            }
        })
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 登录框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到