最近折腾那个menu的特效，也就是显示在博客顶上的那些栏目的menu，简单的css效果不能达到我所要的效果。一方面是css效果太简单了，改变一下颜色、字体什么的，太没有个性了。二是趁此机会再学习一下这个到底该怎么做。思来想去，再加之要符合我们博客的主题，那就为我们的menu加入一个移动小云朵吧。

要完成这个移动的小云朵就必须要给获取到那些栏目的位置，这些栏目都是属于li标签，要想获得position不是absolute的元素的位置坐标还确实费了我不少劲。

1、对于chrome ie8 firefox来说要获取元素的位置很简单，不管是position属性是否为absolute：


document.getElementById('top_menu_cat').offsetTop;
document.getElementById('top_menu_cat').offsetLeft;

2、出现问题的是360浏览器、搜狗浏览器，由此估算可能这些都是ie6核心的，但是我电脑已经没有ie6了，所以无法测试。
这些流浪器对获取absolute的元素是完全没有问题的，但是如果不是的话就需要获取父元素的位置加起来了。

while(obj.offsetParent!=null){
CatTop[i] += obj.offsetTop;
//CatLeft[i]+= obj.offsetLeft;
obj = obj.offsetParent;
}

3、你以为如果是360等浏览器获取符元素位置就ok了么，非也，还有一个问题：
在垂直坐标上，这个是完全没有问题的，但是在水平坐标就有问题了，因为body不会在顶部空余任何的空间，但是一般的网页都会在横向地方空出很多来，即左右的空白区域很多。所以left就该这么写：

CatLeft[i]+=document.body.offsetLeft;

最后，我们来个完整的获取顶部菜单li元素位置的代码：

var MenuCat=document.getElementById('top_menu_cat').getElementsByTagName('li');
var CatTop=new Array();
var CatLeft=new Array();
var i,adminHeight;
for(i=0;i
使用以上代码基本上能够解决浮动与非浮动元素位置问题，基本能够解决不同流浪器下获取元素位置的问题。如有不足之处，望指出。

如无特别说明，本博客文章皆为原创。转载请说明，来自吵吵博客。

原文链接：http://chaochaoblog.com/archives/545

吵吵微信朋友圈，请付款实名加入：