网站用户体验整合设计-体验css+div 之兼容标准XHTML的浮动层特效实现

体验css+div 之兼容标准XHTML的浮动层特效实现

Post by 张美工, 2008-9-22, Views:

　　近日对自己的blog进行代码兼容性的改进，发现了原来的很多问题。之前修改了一些基本的CSS语法错误，基本实现了在IE和Firefox下页面观感上的一致。但对于一些js特效，尤其是浮动层的显示上面的问题，一直留着，今天才花功夫进行了修改，使得浮动层的滚动，鼠标拖放都得到了兼容处理。
1. 浮动层的显示、移动

一个简单的例子：
<div id="mydiv" style="position:absolute;">my div contents</div>
<script language="javascript">
var dX = 10;
var dY = 10;
function mydivMove(x, y){
    var id = 'mydiv';
    if (document.layers){
        document.layers[''+id+''].left = x;
        document.layers[''+id+''].top = y;
    }
    else if (document.all){
        document.all[''+id+''].style.left=x;
        document.all[''+id+''].style.top=y;
    }
    else if (document.getElementById){
        document.getElementById(''+id+'').style.left=x+"px";
        document.getElementById(''+id+'').style.top=y+"px";
    }
}

mydivMove(dX,dY);
</script>

　　主要的问题在于不同浏览器对于层的坐标获取方式不同，尤其要注意当通过getElementById来获取层坐标的时候(非IE浏览器)，改变坐标的时候要加上"px"后缀，而不是直接进行数字赋值。

2. 关于window.onscroll

g_myBodyInstance = (document.documentElement ? document.documentElement : window);
g_myBodyInstance.onscroll = mydivScrollFunc;

上面的代码实现了兼容的onscroll事件处理。可以看到对于Firefox来说onscroll事件是隶属于document.documentElement对象而不是window对象。

　　但似乎Firefox浏览器对于通过鼠标中键滚动页面的操作并不会去触发onscroll事件，而只有拖动右边的窗口滚动条才会触发，这给我带来极大的困扰，这样如果想要让用户浏览页面的任何时候某个浮动层(比如我的导航条)始终位于页面可见范围的话，就不得不使用setInterval或者setTimeout来不停的改变这个浮动层的位置。而不能采用触发onscroll、onresize这两个事件进行显示位置重置。这显然是低效率的方法。幸好标准XHTML提供了一个CSS属性值，可以通过设置这个值来曲线达到目的:
<script>
var id = 'mydiv';
if (document.layers){
    document.layers[''+id+''].position = 'fixed';
}
else if (document.all){
    document.all[''+id+''].style.position='fixed';
}
else if (document.getElementById){
    document.getElementById(''+id+'').style.position='fixed';
}
</script>

　　position的fixed属性让该层能够始终位于窗口的指定位置。从显示效果来看，在Firefox上的显示效果比IE中通过onscroll触发层的位置移动处理显示效果要好很多，看不到层的闪动。
http://www.zeali.net/entry/62

相关文章：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
# Dreamweaver的超级技巧汇总(6)
# Dreamweaver的超级技巧汇总(5)
# Dreamweaver的超级技巧汇总(4)
# Dreamweaver的超级技巧汇总(３)
# Dreamweaver的超级技巧汇总(2)
# Dreamweaver的超级技巧汇总(1)
# 在线QQ MSN TEL交谈工具代码
# 方便使用的一些小简短input\form代码
# VSS使用手册
# JS表单判断函数代码大全 (三)
# JS表单判断函数代码大全 (二)
# JS表单判断函数代码大全

# I E和火狐的css兼容性问题归总