<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>实现多个图片浮动的效果</title>
<style type="text/css">
img{
position:absolute;
filter:alpha(opacity=100);
-moz-opacity:1;
opacity: 1;}
</style>
</head>
<body οnlοad="float()">
<img src="../1.jpg" width="200" style="z-index:2;filter:alpha(opacity=10);-moz-opacity:0.1;" />
<img src="../1.jpg" width="200" style="z-index:3;filter:alpha(opacity=20);-moz-opacity:0.2;" />
<img src="../1.jpg" width="200" style="z-index:4;filter:alpha(opacity=30);-moz-opacity:0.3;" />
<img src="../1.jpg" width="200" style="z-index:5;filter:alpha(opacity=40);-moz-opacity:0.4;" />
<img src="../1.jpg" width="200" style="z-index:6;filter:alpha(opacity=50);-moz-opacity:0.5;" />
<img src="../1.jpg" width="200" style="z-index:7;filter:alpha(opacity=60);-moz-opacity:0.6;" />
<img src="../1.jpg" width="200" style="z-index:8;filter:alpha(opacity=70);-moz-opacity:0.7;" />
<img src="../1.jpg" width="200" style="z-index:9;filter:alpha(opacity=80);-moz-opacity:0.8;" />
<img src="../1.jpg" width="200" style="z-index:10;filter:alpha(opacity=90);-moz-opacity:0.9;" />
<img src="../1.jpg" width="200" style="z-index:11;" οnmοuseοver="clearTimeout(a);" οnmοuseοut="a=setTimeout(float,40);" />
</body>
</html>
<script language="javascript" type="text/javascript">
var imgs=document.images;
var xSpeed=new Array();
var ySpeed=new Array();
var x=new Array();
var y=new Array();
for(var i=0;i<imgs.length;i++){
xSpeed[i]=3;ySpeed[i]=3;
y[i]=i*15;x[i]=i*15;
}
var w=document.documentElement.clientWidth-200,h=document.documentElement.clientHeight-300;
function float(){
for(var i=0;i<imgs.length;i++){
if(x[i]>w|x[i]<0){ xSpeed[i]= -xSpeed[i];}
if(y[i]>h|y[i]<0){ ySpeed[i]= -ySpeed[i];}
x[i]=x[i]+xSpeed[i];
y[i]=y[i]+ySpeed[i];
imgs[i].style.left=x[i]+"px";
imgs[i].style.top=y[i]+"px";
}
a=setTimeout("float()",50);
}
</script>