开放实验室首页上的飞翔小天使已经去掉了

开放实验室首页上的飞翔小天使已经去掉了。因为有很多人不喜欢。
但是有人曾经问过这是如何实现的，我现在就说给你听。

我假设你懂得DHTML的一些基本知识。
一个页面可以定义成很多层，页面元素及其父元素具有的z-index属性决定了它属于哪一层。各层的内容显示互不
干扰，z-index值大的在上面，小的在下面，上面的内容可以覆盖下面的内容。

小天使在页面上位于单独的一层，而且她比一般的层要高一些，也就是它的z-index值要比别的元素大一些。

我们这样来定义小天使层的属性：
<STYLE>
#fly { position:absolute;left:100;top:200;z-index:2; }
</STYLE>

position属性在这里是需要的，但是取absolute或是relative都是无关紧要的。
left,top可以指定初始位置，值是任意的。
z-index指定它只是比一般元素高一层。

现在我们可以在层上放一点东西，也就是放一幅小天使的动画图片。
但是层在哪里呢？我们可以用DIV标签做一个，然后你可以把这个由DIV括起来的内容放在页面源文件的body标签
内，随便放在哪儿都行。
<DIV id=fly><IMG src=xxx.gif></DIV>

然后关键的是如何让她在页面上到处乱飞呢？
一个函数而已：
<SCRIPT>
function doFly()
{
pageY = document.body.scrollTop;
maxx = document.body.clientWidth;
maxy = document.body.clientHeight + pageY;
x = fly.offsetLeft;
y = fly.offsetTop;
dx = 100 * (Math.random() - 0.5);
dy = 100 * (Math.random() - 0.5);
if( x + dx < 0 ) x = 0;
else if(x+dx+fly.offsetWidth>maxx) x=maxx-fly.offsetWidth;
else x=x+dx;
if(y+dy<pageY) y=pageY;
else if(y+dy>maxy) y=maxy-40;
else y=y+dy;
fly.style.left=x;
fly.style.top=y;
setTimeout("doFly()",1000);
}
</SCRIPT>

在解释这个函数以前，我先描述一下预想的效果。
在看得见的窗口范围内随机的乱飞，但是不能象精灵一样突然在左上角出现，一眨眼又突然在右下角出现。也就
是说要稍微连贯一点。而且要让她始终在可见的窗口范围内，不管用户把窗口滚动条如何拖上拖下，也不管窗口
如何调整大小。

现在解释这个函数：

在不考虑水平滚动条的情况下，垂直滚动条必须要考虑。
document.body.scrollTop的值反映了当前的滚动条被拉下了多少距离。
clientWidth,clientHeight的值反映了当前的浏览器客户区窗口的大小。
offsetLeft,offsetTop 的值反映了当前小天使的位置。
然后用随机数确定下一次飞行的距离与方向。
ramdom()是一个界于0与1之间的浮点数，所以-0.5可以随机定方向。
由于这个数太小了，我们可以用一个适当的数来放大，比如100
以下的代码行是判断这个移动距离会不会移出可视范围内，如果是的话，则要调整它。
然后给层的位置赋值，完成实际的移动。
最后为了使它能连续不断地运动，可以设定一个时间间隔的定时器，比如1000毫秒（1秒）。

那么她最初是如何动起来的呢？也就是说第一次的推动力在哪里呢？
可以简单在body标签内加一句 onload="doFly()" 。

好了，这就是所有的过程。



※编辑: modico (modico) 于 2000-05-29 10:49:54 在 [202.117.82.2] 编辑本文