JS 设置物体居中

对于js初级学习很有帮助。

JS实现物体居中，触发发浏览器窗口时物体也居中。这里实现的是一个弹出登录框居中的一个效果。

效果图1：点击登录，弹出登录窗口

效果图2：登录窗口。点击红的X关闭登录框

方法1.

window.οnlοad=function(){          //所有浏览器都兼容     //alert(document.documentElement.clientHeight);//得到整个浏览器的高的     //alert(document.documentElement.clientWidth);//得到整个浏览器的宽的          //让物体居中（整个浏览器的的高/宽-（减去）物体的高、宽、（除以）/2）     var top=(document.documentElement.clientHeight-250)/2;     var left=(document.documentElement.clientWidth-350)/2;     $().getId('login').css('top',top+'px').css('left',left+'px');     //改变浏览器窗口大小 触发事件     window.οnresize=function(){         var top=(document.documentElement.clientHeight-250)/2;         var left=(document.documentElement.clientWidth-350)/2;         //#login必须设置绝对定位         $().getId('login').css('top',top+'px').css('left',left+'px');     };          //点击事件 打开关闭     $().getClass('logBtn').click(function(){         $().getId('login').css('display','block');     });     $().getClass('close').click(function(){         $().getId('login').css('display','none');     }); };

方法2.

1.调用事件

//设置物体居中、触发浏览器事件        $().getId('login').center(350,250).resize(function(){               $().getId('login').center(350,250);        });        //点击事件 打开关闭        $().getClass('logBtn').click(function(){               $().getId('login').css('display','block');        });        $().getClass('close').click(function(){               $().getId('login').css('display','none');        });

2. 封装物体居中

//设置物体居中 Base.prototype.center=function(width,height){//设置两个参数，物体的宽度、高度        var top=(document.documentElement.clientHeight-250)/2;        var left=(document.documentElement.clientWidth-350)/2;        for(var i=0; i<this.elements.length;i++){//遍历               this.elements[i].style.top=top+'px';               this.elements[i].style.left=left+'px';        }        return this;//返回再次调用 否则只能调用一次        };

 

 3.触发浏览器窗口事件

//触发浏览器窗口事件 Base.prototype.resize=function(fn){        window.οnresize=fn;        return this; };