由 amtd 发布于: 2001-02-20 09:38

层的高级应用



　　在《HTML的新功能》一文中，我介绍了目前应用最广泛的几种新特性：层、层叠样式表、帧和动态字体。我们现在来看看关于层在Web 页面上的应用。

　　一、关于HTML新功能的一些说明

　　目前HTML最新的功能，对不同浏览器有不同的支持和解释，我们在应这些新功能的时候，一定要考虑到它们在各种浏览器上效果，否则你自己看起来很好的页面在别人的浏览器上就可能面目全非。

　　现在HTML标准仍是HTML3.2， 浏览器市场的两大巨头Netscape公司和Microsoft 公司为了各自在市场上称雄，努力在自己的浏览器上开发新功能以控制市场，竞争使他们互不相容。Netscape公司的HTML4 标准和IE4的DHTML都有自己的新功能，我们在设计主页时要充分考虑这些因素，努力使主页能适应各种浏览器。

　　二、标记层的应用

　　层的标记〈LAYER〉和〈ILAYER〉用来重叠显示Web内容的各个实体。连Microsoft 也不得不佩服Netscape在这一功能上的成功，预言在IE的未来版本中将支持这一标记。但是目前你只能在NV4或NC4中运用它。有关〈LAYER〉和〈ILAYER〉的区别以及它们的属性、功能我已经在《HTML的新特性》一文中作了介绍。下面我们来做一个应用实例：

　　独立背景：IE4中我们可以用Backgrount－Repeat属性的 no－Repeat值来显示一个独立而不是平铺的背景，这能使你的主页风格为之一新，但NC和NV都不支持这一属性，我们可以用层来达到这种效果。而且让它显示在任意地方。

　　〈html〉〈head〉〈title〉〈/title〉〈/head〉

　　〈body bgcolor=″ffffff″〉

　　〈!－－ 背景层 －－〉

　　〈layer top=″100″ left=″200″ x－index=″1″〉

　　〈img src=″背景图片″〉

　　〈/layer〉

　　〈!－－ 主体层 －－〉

　　〈layer x－index=″2″〉

　　普通HTML语句

　　...

　　〈/layer〉

　　〈/body〉

　　〈/html〉

　　注意在背景层的x－index属性的值一定要比主体层中x－index属性的值要小，才能保证主体层在背景层上面，否则背景就盖住了主体层。通过这个例子我们可以在页面的任何位置放置和主体重叠的图片。

　　三、JavaScript中层对象的应用

　　对于层这一强大的功能，只用标记语言在NN或NC上运用，对主页设计者无疑是一大损失，所幸在JavaScript中提供了层的对象，能使我们在NN（或NC）和IE中都能应用它，当然版本要4.0以上噢。

　　由于NN4和IE4对JavaScript中层对象调用的格式不一样，所以我们在运用时要首先判断浏览者的浏览器：

　　〈html〉〈head〉〈title〉〈/title〉

　　〈SCRIPT LANGUAGE=″JavaScript″〉

　　var appName = navigotor.appName == ″Netscape″;

　　if (appName)

　　 {

　　 thelayer = document.Layer;

　　 }

　　else

　　 {

　　 thelayer = document.all[″Layer″];

　　 }

　　〈!－－－－

　　创建了这个thelayer对象后我们就可以调用它了。现在我们用分区显示段落的标记〈DIV〉来做一个动态层效果。

　　动态层其实就是动态改变层对象的top 和left的值，使层的位置不断变化，这样层上装载的图片或文字就产生了移动的效果。我们现在做一个大雁从页面左上角跨越整个页面飞落到右下角的效果来表达千里传书的意境。

　　function move()

　　 {

　　 if (parseInt(thelayer.top) 〈 640)

　　　　 //设显示分辩率为640＊480

　　　　 {

　　　　 thelayer.top = parseInt(thelayer.top) ＋ 10;

　　　　 thelayer.left = parseInt(thelayer.left) ＋ 15;

　　　　 }

　　 setTimeout(″move()″,50);

　　 }

　　〈/SCRIPT〉

　　〈/head〉

　　〈body bgcolor=″ffffff″〉

　　〈DIV ID=″Layer″ STYLE = ″position:absolute;top:10;left:10;″〉

　　〈IMG SRC=″大雁.gif″〉

　　〈/DIV〉

　　〈页面其他标记语言〉

　　...

　　〈/body〉

　　〈/html〉

　　这个例子中大雁从左上角沿一条直线落到右下角，我们可以先让它飞到A处，然后用A处的TOP和LEFT的值作为起点再让它飞往B处，如此我们就可以让它按照设定的路线飞行。

　　上面的例子我们只用了一个层，但如果要做出多个图片移动的效果，就要同时定义多个层的对象。如我们要做秋天枫叶落下的效果，至少要有四五张枫叶才能达到效果，这时我们就要对每一个层对象声明一个特定的名称，才能在〈DIV〉标记中用ID属性来识别。

　　〈html〉〈head〉〈title〉〈/title〉〈/head〉

　　〈body〉

　　〈SCRIPT LANGUAGE=″JavaScript″〉

　　thelayer = new Array(N);//N由您根据需要设定。

　　function layerinit()

　　 {

　　 var appName = navigator.appName == ″Netscape″;

　　　　if (appName)

　　　　 {

　　　　 thelayer[0]=document.Layer1;

　　　　 thelayer[1]=document.Layer2;

　　　　 ...

　　　　 thelayer[N－1]=document.LayerN;

　　　　 }

　　　　else

　　　　 {

　　　　 thelayer[0]=document.all[″Layer1″];

　　　　 thelayer[1]=document.all[″Layer2″];

　　　　 ...

　　　　 thelayer[N－1]=document.all[″LayerN″];

　　　　 }

　　 }

　　...//设定各层移动方式

　　〈/script〉

　　〈!－－在调用时每一个段落块标记对应一个层对象的名子：－－〉

　　〈div id=″Layer1″ style=″position:absolute; z－index:1; left=x1 px;top=y1 px;visibility:inherit″〉

　　〈img src=″枫叶.gif″〉

　　〈/div〉

　　〈div id=″Layer2″ style=″position:absolute; z－index:2; left=x2 px;top=y2 px;visibility:inherit″〉

　　〈img src=″枫叶.gif″〉

　　〈/div〉　　

　　...

　　〈div id=″LayerN″ style=″position:absolute; z－index:N; left:xN px; top:yN px; visibility:inherit″〉

　　〈img src=″枫叶.gif″〉

　　〈/div〉

　　〈其它HTML语句〉

　　...

　　〈/body〉

　　〈/html〉

　　本例的源程序，大家可以浏览http://yeti.yeah.net/mainpage.htm,这里因篇幅问题不再列出。

　　要注意的是：在JavaScript中，数组的第一个元素标号是从0开始的。而控制层的上下关系的属性是z－index，而不是层标记中x－index，这是和三维坐标的Z轴一致的，值越大的越在上层，即越靠近我们。

　　通过以上的例子，你可以充分发挥自己的想象，做出很多特殊的效果，如多个图层从某一点向四处散开或从四处向某一点汇合等。掌握了应用方法，剩下的就是你自己的巧妙构思了。




（作者：诗剑书生　
__________________