中华网--科技频道--网络教室

　　Layer 对于广大Photoshop 用户来说，可算是个法宝，然而在Web页面的设计上，使用Layer的却很少。Layer 可将页面的内容引入“层”的概念，增强了网页的处理能力。Layer 用法形如：

〈Layer name ="nametext"

top =20

left =20

width =400

clip =0,0,400,200

bgcolor =red

visibility ="show" 〉

〈!－－此处可加上任意合乎页面规则的内容//－－〉

〈/Layer〉

　　Layer是Netscape 实现动态页面的方法之一，Netscape Navigator 4.0以上支持此功能。

　　Layer作为页面上的一个对象具有如下属性和方法:

　　Name 给出Layer的名字，便于Javascript对Layer的控制；Top、Left决定了Layer左上角在页面或其它Layer上的位置；PageX、PageY 决定了 Layer左上角在页面上的位置，它和Top、Left稍有区别；Width决定Layer的宽度；Clip决定Layer显示的区域，有x、y 或x1、y1、x2、y2两种赋值法，x、y相当于0、0、x2、y2；Bgcolor 决定Layer的背景颜色；Visibility有三个值，show和hide决定了Layer是否可见，inherit 决定Layer继承父Layer的Visibility的属性；Background决定了Layer的背景图片；Src 使得Layer可以显示其它页面。

　　以上的属性可以通过Javascript动态改变，产生各种效果。

　　Layer还有以下方法：

　　MoveBy(dx, dy) 将Layer从当前位置向左移dx，向下移dy；MoveTo(x, y) 将Layer从当前位置移动到x、y 处，x、y为相对于页面或Layer的左上角的位置；MoveToAbsolute(x, y)将Layer从当前位置移动到x、y 处，x、y为相对于页面左上角的位置；ResizeBy(dwidth, dheight) 和ResizeTo(width, height)将重新设置Layer的显示区域；MoveAbove(layer)、MoveBelow(layer)两个方法可调整 Layer在Layer序列中的位置，但不改变Layer在页面或Layer上的水平和垂直位置。Load(sourcestring, width) 相当于改变Src的值。

　　具体使用Layer的例子很多，下面仅选择一例供参考。

　　例：飞舞的彩球。

　　〈html〉

　　〈head〉

　　〈title〉飞舞的彩球〈/title〉

　　〈/head〉

　　〈body background="bg.gif" bgcolor="＃FFFFFF" 〉

　　〈!－－若引用，此处开始

　　〈LAYER NAME="a" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="＃blue" CLIP="0,0,3,3"〉〈/LAYER〉

　　〈LAYER NAME="b" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="red" CLIP="0,0,3,3"〉〈/LAYER〉

　　〈LAYER NAME="c" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="red" CLIP="0,0,3,3"〉〈/LAYER〉

　　〈LAYER NAME="d" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="green" CLIP="0,0,3,3"〉〈/LAYER〉

　　〈LAYER NAME="e" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="blue" CLIP="0,0,3,3"〉〈/LAYER〉

　　〈LAYER NAME="f" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="＃black" CLIP="0,0,3,3"〉〈/LAYER〉

　　〈script language="JavaScript1.2"〉

　　var userAgent=navigator.appName ＋ " " ＋ navigator.appVersion;

　　var agentInfo=userAgent.substring(0, 12);

　　if(agentInfo 〉= "Netscape 4.0"){

　　window.captureEvents(Event.MOUSEMOVE);//捕获鼠标事件

　　var yBase = window.innerHeight/2;

　　var xBase = window.innerWidth/2;

　　var delay = 15;

　　var yAmpl = 10;

　　var yMax = 40;

　　var step = .2;

　　var ystep = .5;

　　var currStep = 0;

　　var tAmpl=1;

　　var Xpos = 50;

　　var Ypos = 50;

　　var j = 0;

　　function MoveHandler(evnt) {

　　 Xpos = evnt.pageX ;

　　 Ypos = evnt.pageY ;

　　}

　　window.onMouseMove = MoveHandler;

　　function animateLogo() {

　　 yBase = window.innerHeight/4 ;

　　 xBase = window.innerWidth/4;

　　 for ( j = 0 ; j 〈 6 ; j＋＋ ) {

　　　　document.layers[j].top = Ypos ＋Math.cos((20Math.sin(currStep/(20＋j)))＋j70)yBase(Math.sin(10＋currStep/10)＋0.2)Math.cos((currStep ＋j25)/10);

　　document.layers[j].left =Xpos ＋Math.sin((20Math.sin(currStep/20))＋j70)xBase(Math.sin(10＋currStep/(10＋j))＋0.2)Math.cos((currStep ＋j25)/10);

　　 }

　　 currStep ＋= step;

　　 setTimeout("animateLogo()", delay) ;

　　}

　　animateLogo()

　　}

　　// －－〉

　　〈/script〉

　　〈/body〉

　　〈/html〉

　　打开本例中的页面，你会发现六个飞舞的彩球像蝴蝶一样跟随着鼠标(本例的效果可到http://www.netease.com/～bigmouse/layer3.htm 查看)。

　　摘自《赛迪网》　张来东/文

404 Not Found

nginx

科技检索

中华网推荐