最近折腾那个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
吵吵微信朋友圈,请付款实名加入:
这些知识我也好想学会!
那就慢慢学学呗。
看着眼花缭乱,好复杂。
可见编程的辛苦呀,我是学不会这些的啦
呵呵 编程是业余爱好的。