<!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>
img{
position:absolute;
filter:alpha(opacity=100);/* IE */
-moz-opacity:1;/* Moz + FF */
opacity: 1;/* 支持CSS3的瀏覽器（FF 1.5也支持）*/
}
</style>
</head>
<body>
<img src="../images/1.jpg" width="100" style="z-index:2;filter:alpha(opacity=10);-moz-opacity:0.1;" />
<img src="../images/1.jpg" width="100" style="z-index:3;filter:alpha(opacity=20);-moz-opacity:0.2;" />
<img src="../images/1.jpg" width="100" style="z-index:4;filter:alpha(opacity=30);-moz-opacity:0.3;" />
<img src="../images/1.jpg" width="100" style="z-index:5;filter:alpha(opacity=40);-moz-opacity:0.4;" />
<img src="../images/1.jpg" width="100" style="z-index:6;filter:alpha(opacity=50);-moz-opacity:0.5;" />
<img src="../images/1.jpg" width="100" style="z-index:7;filter:alpha(opacity=60);-moz-opacity:0.6;" />
<img src="../images/1.jpg" width="100" style="z-index:8;filter:alpha(opacity=70);-moz-opacity:0.7;" />
<img src="../images/1.jpg" width="100" style="z-index:9;filter:alpha(opacity=80);-moz-opacity:0.8;" />
<img src="../images/1.jpg" width="100" style="z-index:10;filter:alpha(opacity=90);-moz-opacity:0.9;" />
<img src="../images/1.jpg" width="100" style="z-index:11;" οnmοuseοver="clearTimeout(a);" οnmοuseοut="a=setTimeout(float,40);" />
</body>
</html>
<script>
var imgs = document.images;
//var xSpeed=3, ySpeed=3; //x，y軸方向上的偏移量
//var x = 0, y = 0; //用於保存圖像的座標位置
var xSpeed = new Array(), ySpeed = new Array(), x = new Array(), y = new Array();
for(var i=0;i<imgs.length;i++){
xSpeed[i] = 3; ySpeed[i] = 3;
x[i] = i*15; y[i] = i*15;
}
var w = document.documentElement.clientWidth-110, h = document.documentElement.clientHeight-85;
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] += xSpeed[i]; //計算新的位置
y[i] += ySpeed[i];
imgs[i].style.left = x[i] + "px"; //重新設置給圖片
imgs[i].style.top = y[i] + "px";
}
a = setTimeout(float, 40); //clearTimeout(a);
}
float();
//setInterval(float, 40) //每隔40毫秒設置一次位置
</script>