动态基本教程第九节: 叠套层次 | |
回顾我们已经学到了
这一节我们将告诉你怎样层次里面套层次 (nesting layers). 叠套层次
元素, 层次, Layer 这三个词是我们在教程经常用的. 它们是一个意
我们把在一个层次里的层次叫子层次, 而把包括子层次的层次叫主
我们以后会发觉叠套层次会给我们带来一些方便. 这是因为子层次
用 JavaScript 来实现层次套层次在 NetScapt 和 Internet Explorer 是大 Stylesheets 和叠套叠套层次其实就是把子层次 DIV 写在主层次 DIV 的里面. <DIV ID="parent1Div"> <DIV ID="child1Div"></DIV> <DIV ID="child2Div"></DIV> </DIV>
对于叠套层次, 在 DIV 里面定义 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 里操纵叠套是大不一样的. childLayer.style.properyName 但是对 Netscape 来说, 如果你想操纵子层次你必须参照它的主层次. document.parentLayer.document.childLayer.propertyName
这里的在 layer 名字之前的 document 是因为 Netscape 把 layer 看做 <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 居然让你读不出来 alert(parent1.left)
在 IE 里你将什么也得不到. 但当你用 JavaScript 改变了这些性质的
在 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 的位置了. 点这里 看移动主层次和子层次的范例. 可视性质和叠套:如果你忘记了给出子层次的可视性质, 它将会使用主层次的可视性质. 点这里 看可视性质和叠套层次的关系. |
|
|