吵吵   2011-08-14  阅读:2,898

最近折腾那个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
使用以上代码基本上能够解决浮动与非浮动元素位置问题,基本能够解决不同流浪器下获取元素位置的问题。如有不足之处,望指出。

吵吵微信朋友圈,请付款实名加入:

吵吵 吵吵

5条回应:“不同浏览器js获取元素位置异同”

  1. 流氓兔足迹说道:

    这些知识我也好想学会!

  2. 地球博客说道:

    看着眼花缭乱,好复杂。

  3. 黄芳说道:

    可见编程的辛苦呀,我是学不会这些的啦

发表评论

电子邮件地址不会被公开。 必填项已用*标注