jQuery仿B站用户登录弹出拼图滑块拖动验证代码

jQuery仿B站用户登录弹出拼图滑块拖动验证代码，输入账号和密码点击登录按钮就滑动切换到拼图滑块验证界面。

分类：表单代码 > 验证码难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

js代码

<script src="js/jquery-1.10.2.js"></script>
<script src="js/img_ver.js"></script>
<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>