浏览器中用JS获取元素位置

最近在把演示站升级一下，百度的分享代码已经失效了，所以我就自己做了一个。中间也经历了一些困难，现在都已经解决。关于元素定位的一些心得我就记录一下。

//竖滚动条当前的TOP值
gt = $(window).scrollTop();

//横滚动条当前的LEFT值
gw = $(window).scrollLeft();


//元素的TOP值和LEFT值
m = $("#s54818").offset();

//m元素的TOP值
m.top;

//m元素的LEFT值
m.left;


//元素本身的宽度
w = $("#s54818").outerWidth();

//元素本身的高度
h = $("#s54818").outerHeight();


//当前显示的可见总宽度
ww = $(window).width();

//当前显示的可见高度
wh = $(window).height();


//整个BODY的宽度
bw = $('body').width();

//整个BODY的高度
bh = $('body').height();


//通过 appendTo 将 DIV 添加到 body元素内部的尾端
$('<div id="s54818" class="s54818"> </div>').appendTo("body");


//-------------------元素在当前看到的页面上下左右的距离---------
//元素 与 当前显示的顶部距离 = 元素的TOP值 - 当前竖向滚动条的TOP值
xt = m.top-gt;

//元素 与 当前显示的左边距离 = 元素的LEFT值 - 当前横向滚动条的LEFT值
xl = m.left-gw;

//元素 与 当前显示的底部距离 = 当前显示的可见总高度 - 元素到当前可见顶部的距离 - 元素本身的高度
xb = wh-xt-h;

//元素 与 当前显示的右边距离 = 当前显示的可见总宽度 - 元素到当前可见左边的距离 - 元素本身的宽度
xr = ww-xl-w,
//----------------------------------


//-------------------在元素上下左右显示--------
//当 元素到浏览器右边的距离 大于 元素本身宽度 ？ ml=m元素的LEFT值  否则  ml=m元素的LEFT值-本身宽度
//（这个主要意思就是右边有位置就显示在右边，否则显示在左边 ）
ml = (xr)>w ? m.left : m.left-w;

//当 元素到浏览器底部的距离 大于 元素本身高度 ？ ml=（m元素的TOP值+m本身高度）  否则  ml=（m元素的TOP值-m本身高度）
//（这个主要意思就是下边有位置就显示在元素的下边，否则显示在元素的上边 ）
mt = (xb)>h ? m.top+h : m.top-h;
//-----------------------------------

//----------------在当前看到的页面中间显示--------
// (可见高度-元素本身高度)/2 + 当前竖滚动条的TOP值
zt = (wh-h)/2+gt

// (可见宽度-元素本身宽度)/2 + 当前横滚动条的LEFT值
zl = (ww-w)/2+gl

zt = zt < 0 ? 0 : zt;
zl = zl < 0 ? 0 : zl;
//-----------------------------------


//设置元素的TOP和LEFT位置
$("#s54818").css({left: ml,top:mt})

//动态对元素添加class类名
$("#s54818").addClass("show")