javacript实现的落叶效果

主题:javacript实现的落叶效果

javacript实现的落叶效果，demo地址如下：http://www.webkaifa.com/ziliao/fallingLeaf.htm
页面源码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
#Layer0 { Z-INDEX: 10; LEFT: -400px; WIDTH: 100px; POSITION: absolute; TOP: -100px; HEIGHT: 60px}
#Layer0 { Z-INDEX: 10; LEFT: -100px; WIDTH: 100px; POSITION: absolute; TOP: -100px; HEIGHT: 60px}
#Layer1 { Z-INDEX: 20; LEFT: -100px; WIDTH: 100px; POSITION: absolute; TOP: -100px; HEIGHT: 60px}
#Layer2 { Z-INDEX: 30; LEFT: -100px; WIDTH: 100px; POSITION: absolute; TOP: -100px; HEIGHT: 60px}
#Layer3 { Z-INDEX: 40; LEFT: -100px; WIDTH: 100px; POSITION: absolute; TOP: -100px; HEIGHT: 60px}
#Layer4 { Z-INDEX: 50; LEFT: -100px; WIDTH: 100px; POSITION: absolute; TOP: -100px; HEIGHT: 60px}
#Layer5 { Z-INDEX: 60; LEFT: -100px; WIDTH: 100px; POSITION: absolute; TOP: -100px; HEIGHT: 60px}
#Layer6 { Z-INDEX: 70; LEFT: -100px; WIDTH: 100px; POSITION: absolute; TOP: -100px; HEIGHT: 60px}
#Layer7 {Z-INDEX: 70; LEFT: -100px; WIDTH: 100px; POSITION: absolute; TOP: -100px; HEIGHT: 60px}
</style>
</head>
<script>
xfirst = new Array(80,150,220,310,300,590,680); //初始x位置
yfirst = new Array(0,180,70,10,50,30,140); //初始y位置
xcoor = new Array(80,150,220,310,400,590,680);
ycoor = new Array(0,180,70,10,50,30,140);
xdirec= new Array(1,-1,1,-1,1,-1); //初始方向 -1 为左 and 1 为右
var ns = navigator.appName == "Netscape";
function doplay()
{
var x,y,i,j,w,h;
w = window.screen.width - 100;
// w = document.body.clientWidth - 100;
h = window.screen.height - 100;
// h = document.body.clientHeight - 50;
for(j=0;j<7;j++){
i=Math.random(); //随机改变运动方向
if (i > 0.95) xdirec[j] = 0 - xdirec[j];
x=Math.floor(10*Math.random());
y=Math.floor(5*Math.random()); //x和y方向上的随机增量
if ( xdirec[j] == 1 ) xcoor[j] = xcoor[j] + x;
else xcoor[j] = xcoor[j] - x;
ycoor[j] = ycoor[j] + y; //x越界则变向,y越界则返回
if ( xcoor[j] >= w ) {xcoor[j]=w;xdirec[j]=-1;}
if ( xcoor[j] <= 0 ) {xcoor[j]=0;xdirec[j]=1;}
if ( ycoor[j] >= h ) {xcoor[j]=xfirst[j];ycoor[j]=yfirst[j];}
if (!ns){ eval('document.all'+'["Layer'+j+'"]'+'.style.left='+xcoor[j]);
eval('document.all'+'["Layer'+j+'"]'+'.style.top='+ycoor[j]);}
else { eval('document.layers'+'["Layer'+j+'"]'+'.left='+xcoor[j]);
eval('document.layers'+'["Layer'+j+'"]'+'.top='+ycoor[j]);}
}
setTimeout('doplay()',100);
}
</script>
<body onLoad="doplay()">
<DIV id=Layer0>
<DD><IMG height=21 src="../images/leaf_0010.gif" width=18> </DD></DIV>
<DIV id=Layer1>
<DD><IMG height=22 src="../images/leaf_0010.gif" width=18> </DD></DIV>
<DIV id=Layer2>
<DD><IMG height=28 src="../images/leaf_0010.gif" width=25> </DD></DIV>
<DIV id=Layer3>
<DD><IMG height=23 src="../images/leaf_0010.gif" width=18> </DD></DIV>
<DIV id=Layer4>
<DD><IMG height=22 src="../images/leaf_0010.gif" width=18> </DD></DIV>
<DIV id=Layer5>
<DD><IMG height=25 src="../images/leaf_0010.gif" width=18> </DD></DIV>
<DIV id=Layer6>
<DD><IMG height=28 src="../images/leaf_0010.gif" width=25> </DD></DIV>
<DIV id=Layer7>
<DD><IMG height=28 src="../images/leaf_0010.gif" width=25> </DD></DIV>
</body>
</html>