浮动层代码兼容性
来源:互联网 发布:我的野蛮女友 知乎 编辑:程序博客网 时间:2024/06/06 06:40
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触发层的位置移动处理显示效果要好很多,看不到层的闪动。
Updated 2005-9-23 14:24 -- 学海无涯提供了另外的一种实现移动层的方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<style type="text/css">
body {
margin:0; /* 必须 */
border:0;
height:100%; /* 必须 */
overflow-y:auto;/* 必须 */
}
#menu {display:block; top:10px; left:150px; width:130px; position:fixed;} /* IE并不认识fixed,而FF认识 */
* html #menu {position:absolute;} /* 这个只有IE认识 */
</style>
<!--[if IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<div>
<ul style="list-style-type:decimal">
<script language=javascript>
for(i=0;i<500;i++) document.write('<li></li>');
</script></ul>
</div>
<div id="menu">
<img src="http://www.cnblogs.com/images/cnblogs_com/goodspeed/795/o_o_mylogo.gif" />
</div>
</body>
</html>
据说IE7已提供了fixed的支持。
使用上面的代码你必须注意:body里的元素不能有 position:relative ,否则这个元素将不会滚动。
3. 关于onmousemove
对于IE来说,模拟鼠标拖放操作相关处理如下:
// 捕获鼠标移动
mydiv.setCapture();
document.onmousemove = mydivMoveFunc;
// 释放鼠标移动
mydiv.releaseCapture();
document.onmousemove = null;
对于Firefox浏览器来说,要这样处理:
// 捕获鼠标移动window.captureEvents(Event.MOUSEMOVE);
window.onmousemove = mydivMoveFunc;
// 释放鼠标移动
window.releaseEvents(Event.MOUSEMOVE);
window.onmousemove = null;
可见IE支持细化到某个层的事件捕获,而Firefox只能是捕获整个页面所有的相同事件。从实际显示效果来看,IE的表现出来的拖拉效果要明显好一些。关于完整的鼠标拖放的实现可以参见可移动层的实现示例一文
题外话:发现原来style="cursor:pointer;"才是标准用法,以前一直都写成style="cursor:hand;"的说,呵呵。
IE与Firefox的不同
IE支持自定义光标文件cursor:url()
IE支持自定义滚动条颜色风格
IE6中的select有永远处在最上的bug,而且css对select不起作用。
在form中,IE支持label,包括文字和图片;但是firefox不支持图片的label,
点击图片不能让label for的radio或者checkbox产生效果。
IE和firefox都是支持onscroll事件的,但是firefox中textarea对此事件不支持。
CSS方面,IE中支持在CSS中嵌入expresion,而Firefox不支持
firefox支择相邻子选择符“>”,而IE6不支持(IE7支持)
firefox 对display的inline-block不支持,而IE均支持
- 浮动层代码兼容性
- 浮动层效果-类似webos的浮动窗口js代码
- 浮动层在Flash之上代码
- jquery简单的弹出层浮动层代码
- 浮动层
- 支持多个浮动层而不冲突的漂浮广告(兼容性不错)
- 可适应XHTML的浮动层javascript代码
- js创建浮动层代码和js操作数据
- 固定在网页右侧的浮动层实现代码
- Javascript浮动广告图片代码,已封装!兼容性强!使用简单!
- 给层加上最大化,最小化和关闭按钮(经典代码)适合做浮动层类。
- 浮动层的制作
- 浮动的半透明层
- js浮动层制作
- 浮动广告层
- 浮动层菜单
- 简单页面 浮动层
- Jquery浮动层插件
- ADO第一次亲密接触 -- ADO开发实践
- RAILS acts_as_solr
- 今天你说"NO"了吗?
- linux下 Oracle自动启动与停止
- 一个简单的端口扫描程序题
- 浮动层代码兼容性
- ubuntu 常见安装软件错误
- Beowulf
- 学会去管理时间
- 如何创建不规则的Windows窗体?
- 浅析Windows2000/XP服务与后门技术
- 一些感言
- 于丹《庄子》心得讲稿-《认识你自己》
- 抽象工厂模式,BLL层如何使用工厂的代码?