jQuery点击按钮出现会员登陆特效代码

jQuery点击按钮出现会员登陆特效代码

这是一款jQuery点击弹出登录注册表单代码是jQuery基于bootstrap制作网站点击弹出登录或注册表单内容切换代码。

使用方法
在页面引入以下jquery.min.js和bootstrap.min.js文件

1
2
<script src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<script>
    $(document).ready(function() {
        //打开会员登录
        $("#Login_start_").click(function() {
            $("#regist_container").hide();
            $("#_close").show();
            $("#_start").animate({
                left: '350px',
                height: '520px',
                width: '400px'
            }, 500, function() {
                $("#login_container").show(500);
                $("#_close").animate({
                    height: '40px',
                    width: '40px'
                }, 500);
            });
        });
        //打开会员注册
        $("#Regist_start_").click(function() {
            $("#login_container").hide();
            $("#_close").show();
            $("#_start").animate({
                left: '350px',
                height: '520px',
                width: '400px'
            }, 500, function() {
                $("#regist_container").show(500);
                $("#_close").animate({
                    height: '40px',
                    width: '40px'
                }, 500);
            });
        });
        //关闭
        $("#_close").click(function() {
               
            $("#_close").animate({
                height: '0px',
                width: '0px'
            }, 500, function() {
                $("#_close").hide(500);
                $("#login_container").hide(500);
                $("#regist_container").hide(500);
                $("#_start").animate({
                    left: '0px',
                    height: '0px',
                    width: '0px'
                }, 500);
            });
        });
        //去 注册
        $("#toRegist").click(function(){
            $("#login_container").hide(500);
            $("#regist_container").show(500);
        });
        //去 登录
        $("#toLogin").click(function(){
            $("#regist_container").hide(500);
            $("#login_container").show(500);
        });
    });
</script>
<script type="text/javascript">
    var clock = '';
    var nums = 30;
    var btn;
    function sendCode(thisBtn) {
        btn = thisBtn;
        btn.disabled = true; //将按钮置为不可点击
        btn.value = '重新获取('+nums+')';
        clock = setInterval(doLoop, 1000); //一秒执行一次
    }
   
    function doLoop() {
        nums--;
        if (nums > 0) {
            btn.value = '重新获取('+nums+')';
        } else {
            clearInterval(clock); //清除js定时器
            btn.disabled = false;
            btn.value = '点击发送验证码';
            nums = 10; //重置时间
        }
    }
       
    $(document).ready(function(){
        $("#login_QQ").click(function(){
            alert("暂停使用!");
        });
        $("#login_WB").click(function(){
            alert("暂停使用!");
        });
    });
</script>

文件信息:

    1

    发表评论