之前做过的很多网站的登录都大同小异，用系统默认的标签都能实现，也没做太多思考，最近有个项目效果图是客户提供的，登录要做鼠标经过时弹出登录框，并有QQ和微博账户登录，当然QQ和微博登录需要开发部。但整个效果实现要设计要完成。也许有人会说这是很简单的嘛，那么你就可以忽略以下的内容啦。弹出的用户框如下图所示：

一开始觉得挺麻烦的，我对js了解不多，后来发觉看着有点眼熟，和我们Sf标准版登录有点相似，就把专业版的登录拿过来进行修改。加入QQ帐户登录图标和微博登录图片。调整对应CSS样式，基本上就出来了。然后确保公共脚本里要有jquery.pack.js 和jquery.peex.js文件。

弹出框的效果是有一段js来实现。

    $(function () {

        $('a[class="fav"]').addFavorite(); 

        var checkUserLogin = function () {

            $.pe.ajax('checkUserLogin', { success: function (response) {

                var _response = $(response);

                if (_response.find('status').text() == 'ok') {

                    var _loginedUserInfo = $('#loginedUserInfo'), _loginAnchor = $('#loginAnchor');

                    _loginedUserInfo.html($.pe.replaceUserInfoVariable(_loginedUserInfo.html(), _response));

                    $('#loginedUserInfo,#loginAnchor').bind({

                        'mouseenter': function () {

                            _loginedUserInfo.slideDown(500);

                            try { clearTimeout(timer); } catch (e) { }

                        },

                        'mouseleave': function () {

                            timer = setTimeout(function () {

                                _loginedUserInfo.slideUp(500);

                            }, 500);

                        }

                    });

                    _loginAnchor.html(' 你好, ' + _response.find('username').text() + "").fadeIn();

                    $('#loginStatusSign').hide();

                    $('#logout').click(function () {

                        $.pe.ajax('logout', { success: function (response) {

                            if ($(response).find('status').text() == 'ok') {

                                $('#loginField input[name="username"]').val('');

                                $('#loginField input[name="userpass"]').val('');

                                $('#loginField input[name="validate"]').val('');

                                $('#loginField input[name="saveinfo"]').attr("checked", false);

                                location.reload();

                            }

                        }

                        });

                    })

                } else {

                    $.pe.ajax('checkLoginValidate', { success: function (response) {

                        if ($(response).find('status').text() == 'yes') {

                            $('#validateSign').click(function () { $.pe.refreshValidateCode($('.validateSign')); });

                            $('#validateField').show();

                        }

                    }

                    });

                    $('#validateCode').focus(function(){$('#validateSign').click();$('#validateSign').show();})

                    $('#loginAnchor').mouseenter(function () {

                        $('#loginField').overlay({ api: true, expose: true }).load(); return false;

                    }).fadeIn();

                    $('#login').click(function () {

                        var username = $('#loginField input[name="username"]');

                        var userpass = $('#loginField input[name="userpass"]');

                        var saveinfo = $('#loginField input[name="saveinfo"]');

                        var validate = $('#loginField input[name="validate"]');

 

                        if (username.val() == '') {

                            alert('请填写用户名！');

                            username.focus();

                            return;

                        }

                        if (userpass.val() == '') {

                            alert('请填写密码！');

                            userpass.focus();

                            return;

                        }

                        if ($('#validateField').css("display") != 'none') {

                            if (validate.val() == '') {

                                alert("请填写验证码！");

                                validate.focus();

                                return;

                            }

                        }

                        $.pe.ajax('userLogin', {

                            params: {

                                username: username.val(),

                                password: userpass.val(),

                                checkcode: validate.val(),

                                expiration: saveinfo.attr("checked") ? 'Month' : 'None'

                            }, success: function (response) {

                                var _response = $(response)

                                switch (_response.find('status').text()) {

                                    case "ok":

                                        location.reload();

                                        break;

                                    case "err":

                                        alert(_response.find('body').text());

                                        $.pe.refreshValidateCode($('.validateSign'));

                                        break;

                                }

                            }

                        })

                    })

                    $('#loginStatusSign').hide();

                    $('#loginField').keypress(function (e) {

                        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {

                            $('#login').click();

                            return false;

                        }

                        return true;

                    })

                }

            }

            })

        }

        checkUserLogin();

    })

    

 

默认的效果是鼠标点击 弹出登录框的，现在客户要鼠标经过弹出。这里就涉及到鼠标的jQuery 事件，把对应的click事件换成 mouseenter即可。

1）jQuery 事件 - click() 方法

当点击元素时，会发生 click 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

2）jQuery 事件 - mouseenter() 方法

当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与 mouseleave 事件一起使用。
 

登录标签下载