动态基本教程第九节: 叠套层次

回顾

我们已经学到了

• 定义一个 DIV 元素， 以及用 CSS 来给出它的性质(CSS 位置设定)
• 如何知道哪种浏览器正在被使用 (通用程序)
• 如何设立一个通用的指针变量指向一个 DIV 元素 (通用程序)
• 以及如何显示或隐蔽这个 DIV 元素 (显示和隐蔽)
• 移动这个 DIV 元素 (元素的移动)
• 连续移动这个 DIV 元素 (元素的滑动)
• 用键盘来控制元素的运动 (键盘控制)
• 用鼠标来控制元素的运动 (鼠标控制)
• 调节一个元素的可视区 (调节可视区)

这一节我们将告诉你怎样层次里面套层次 (nesting layers).

叠套层次

元素, 层次, Layer 这三个词是我们在教程经常用的. 它们是一个意
思: 就是一段在 <DIV> 里的 HTML. 而所谓叠套层次就是层次里面
套层次, 或是 netsting layers.

我们把在一个层次里的层次叫子层次, 而把包括子层次的层次叫主
层次. 子层次的位置全是相对于主层次的. 打个比喻, 主层次对子层
次的关系就像窗口对主层次的关系.

我们以后会发觉叠套层次会给我们带来一些方便. 这是因为子层次
的位置是相对于主层次的. 也就是说当我们移动主层次的时候, 子
层次也随着移动.

用 JavaScript 来实现层次套层次在 NetScapt 和 Internet Explorer 是大
不相同. 这就是为什么我们很少看到层次套层次的例子. 这里我们
将要提供一个方法去实现兼容的层次重叠.

Stylesheets 和叠套

叠套层次其实就是把子层次 DIV 写在主层次 DIV 的里面.

<DIV ID="parent1Div">
    <DIV ID="child1Div"></DIV>
    <DIV ID="child2Div"></DIV>

</DIV>

对于叠套层次, 在 DIV 里面定义 STYLE 是无法工作的, 所以我们只
能用 <STYLE> 来定义叠套层次的性质.

<STYLE TYPE="text/css">
<!--
#parent1Div {position:absolute; left:100; top:80; width:500; height:347;
        clip:rect(0,500,347,0);
        background-color:#C0C0C0; layer-background-color:#C0C0C0;}
#child1Div {position:absolute; left:-20; top:200; width:70; height:70;
        clip:rect(0,70,70,0);
        background-color:#FF0000; layer-background-color:#FF0000;}
#child2Div {position:absolute; left:100; top:280; width:300; height:60;
        clip:rect(0,300,60,0);
        background-color:#CCFFCC; layer-background-color:#CCFFCC;}
-->
</STYLE>

<DIV ID="parent1Div">
    <IMG src="../picture/bj01_tiantan.jpg" border=0>
    <DIV ID="child1Div"></DIV>
    <DIV ID="child2Div"><center>北京天坛祈年殿</center></DIV>
</DIV>

点这里看上面的例子.

在上面的例子里我们还定义了可视区. 一般来说你应该定义可视区
和颜色. 我们这个例子里, 主层次是天坛照片, 第一个子层次是个红
色方形, 第二个子层次是绿色长方形, 上有照片说明.

JavaScript 和叠套

JavaScrip 在 Netscape 和 Internet Explore 里操纵叠套是大不一样的.
在 IE 里处理叠套层次和处理一般层次没有什么区别.

  childLayer.style.properyName

但是对 Netscape 来说, 如果你想操纵子层次你必须参照它的主层次.

  document.parentLayer.document.childLayer.propertyName

这里的在 layer 名字之前的 document 是因为 Netscape 把 layer 看做
document. 另外你所要知道的是叠套的层次是没有限制的, 也就是说
你可以叠套无数层. 比如我们把上面的例子里的第二个子层次放到
第一个子层次里.

<DIV ID="parent1Div">
  <DIV ID="child1Div">
    <DIV ID="child2Div"></DIV>
  </DIV>
</DIV>

在这个情况下, 想要操纵 child2Div, 你得

  document.parent1Div.document.child1Div.document.child2Div.propertyName

我们现在可以来为这些层次定义指针变量

function init() {
  if (ns4) {
    parent1 = document.parent1Div
    child1 = document.parent1Div.document.child1Div
    child2 = document.parent1Div.document.child2Div
  }
  if (ie4) {
    parent1 = parent1Div.style
    child1 = child1Div.style
    child2 = child2Div.style
  }
}

但我们还要处理一些其他的问题.

IE 的麻烦和处理:

当你用 STYLE tag 来定义你的 Layer 的时候, IE 居然让你读不出来
Layer 性质的初始值. 比如你想知道 parent1 刚开始的位置:

 alert(parent1.left)

在 IE 里你将什么也得不到. 但当你用 JavaScript 改变了这些性质的
值以后, 你就能看到它们的值了. 这个问题显然使得我们无法知道
元素的初始位置, 也就是说无法去准确的控制它了. 但 Microsoft 添
加了一些非标准 CSS 性质在 IE4 里可以使得我们能解决这个麻烦.

• pixelLeft
• pixelTop
• pixelWidth
• pixelHeight

在 IE4 里, 这几个新的性质不会受到 STYLE tag 的影响. 所以我们可
把程序做如下的修改使得我们能记住初始位置.

function init() {
  if (ns4) {
    parent1 = document.parent1Div
    parent1.xpos = parent1.left
    parent1.ypos = parent1.top
    child1 = document.parent1Div.document.child1Div
    child1.xpos = child1.left
    child1.ypos = child1.top
    child2 = document.parent1Div.document.child2Div
    child2.xpos = child2.left
    child2.ypos = child2.top
  }
  if (ie4) {
    parent1 = parent1Div.style
    parent1.xpos = parent1.pixelLeft
    parent1.ypos = parent1.pixelTop
    child1 = child1Div.style
    child1.xpos = child1.pixelLeft
    child1.ypos = child1.pixelTop
    child2 = child2Div.style
    child2.xpos = child2.pixelLeft
    child2.ypos = child2.pixelTop
  }
}

这样你就可以像以前那样很方便的改变 layer 的位置了.

点这里 看移动主层次和子层次的范例.

可视性质和叠套:

如果你忘记了给出子层次的可视性质, 它将会使用主层次的可视性质.

点这里 看可视性质和叠套层次的关系.