前言

初学jquery写的代码，陈年往事回忆一下。

正文

介绍一下大体思路

思路:

1.需要控制一块区域，这块区域一开始是隐藏的。

2.这个区域需要关闭按钮，同时我需要写绑定事件，关闭的时候让这块区域消失。

3.需要动态控制遮罩层。

4.当窗体滚动的时候，我需要去让这块移动，那么这块区域的定位应该是绝对定位的。

5.当窗体大小变化的时候，我需要将这个登录从新定位

说了这么多其实就是一个简单的效果:

嗯，按照这个大体的思路，我当时写下这样一份充满了bug性代码。

//遮罩层

$(function () {

    var oBtn = $('#show');

    var popWindow = $('.popwindow');

    var oClose = $(' .form a.close');

    var browserwidth = $(window).width();

    var browSerHeight = $(window).height();

    //left的值=浏览器可视区域/2-弹出窗口的区域/2

    //top的值=浏览器可视区域/2-弹出窗口的区域/2

    var popWindowWidth = popWindow.outerWidth(true);

    var popWindowHeight = popWindow.outerHeight(true);

    var positionLeft = browserwidth / 2 - popWindowWidth / 2;

    var positionTop = browSerHeight / 2 - popWindowHeight / 2;

    var browserScollTop = $(window).scrollTop();

    var zhezhaowidth = $(document).width();

    var zhezaoheight = $(document).height();

    var oZZC = '<div class="zhezaocheng"><div>';

    //显示窗口事件

    oBtn.click(function () {

        popWindow.show().animate({

            'left': positionLeft + 'px',

            'top': positionTop + 'px'

        }, 500);

        $('body').append(oZZC);

        $('.zhezaocheng').width(zhezhaowidth).height(zhezaoheight);

    });

    //关闭按钮事件

    oClose.click(function () {

        popWindow.hide();

        $('.zhezaocheng').remove();

    });

    $(window).scroll(

            function () {

                if (popWindow.is(':visible')) {

                    browserScollTop = $(window).scrollTop();

                    var positionTop = browSerHeight / 2 - popWindowHeight / 2 + browserScollTop;

                    popWindow.animate({

                        'left': positionLeft + 'px',

                        'top': positionTop + 'px'

                    }, 500).dequeue();//清除前面的运动函数

                }

            }

    )

    $(window).resize(function () {

        if (popWindow.is(':visible')) {

            var browserwidth = $(window).width();

            var browSerHeight = $(window).height();

            var positionLeft = browserwidth / 2 - popWindowWidth / 2 ;

            var positionTop = browSerHeight / 2 - popWindowHeight / 2 + browserScollTop;

            popWindow.animate({

                'left': positionLeft + 'px',

                'top': positionTop + 'px'

            }, 500).dequeue();

        }

    })

})

在现在看来这是一份很有问题的代码；

问题如下：

1.没有将初始化提取出来，产生了冗余代码，有很多冗余的参数。

2.没有将提取显示登录界面的元素采用配置文件暴露出来，比如说popwindow 区域，show 事件，oClose 事件等等等。

3.充满了中文命名的问题

4.没有良好的封装

5.等等等很多细节

问题很多，发出来是希望作为反面教材，同时希望有人能够一起重写，然后得以共同进步。不要喷哈，当时作为刚学问题很多的，我也是原封不动发出来。

发这个主要是我觉得也许错误性案例的共同讨论，更有进步意义，能学习到先驱们的写法，同时也存在更多互动。先驱们，该出力的时候到了，在此静候。