利用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 值