利用jquery让元素居中

利用jquery让元素居中

一、     Html页面代码

//前提需要页面中引入了jquery.js对象

//计算left

//当前窗口宽度

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

        //整体宽度减去当前元素的宽度

              nDivLeft = nDivLeft - parseInt(eDiv.offsetWidth);

         //计算中间位置

              nDivLeft = nDivLeft/2;

        //当前元素是展示在屏幕中间的，加上滚动条滚动的距离

        nDivLeft = nDivLeft + $(document).scrollLeft();

       //设置对象的left坐标

              $.style(eDiv,"left",nDivLeft);

             

              //计算Top,原理与上边的原理一致

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

              nDivTop = nDivTop - parseInt(eDiv.offsetHeight);

              nDivTop = nDivTop/2;

              nDivTop = nDivTop + $(document).scrollTop();

              $.style(eDiv,"top",nDivTop);

 

 计算原理：

1)    Left的位置计算

a)     获取当前窗口（window的可是区域）的宽度

b)     计算当前对象在该窗口中间的left值

c)     当前left值加上document的滚动条水平方向滚动的距离即为最终的left值

2)    Top位置的计算

a)     获取当前窗口（window的可视区域）的高度

b)     计算当前对象在该窗口中间的top值

c)     当前top值加上document的滚动条竖直方向滚动的距离即为最终的top值