好学IT学院:IT信息技术分享交流平台
来源:互联网  作者:本站整理  发布时间:2008-02-18  ★★★加入收藏〗〖手机版
兼容标准XHTML的浮动层特效实现
摘要:1. 浮动层的显示、移动一个简单的例子:div id="mydiv" style="position:absolute;"my div contents/divscript language="javascript"var dX = 10;……

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触发层的位置移动处理显示效果要好很多,看不到层的闪动。

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的表现出来的拖拉效果要明显好一些。关于完整的鼠标拖放的实现可以参见http://www.webjx.com/htmldata/2005-06-14/1118735650.html

题外话:发现原来style="cursor:pointer;"才是标准用法,以前一直都写成style="cursor:hand;"的说,呵呵。

  • 好学触屏公众号虎力全开、杨帆起航!
  • 好学考试H5触屏版开放内测