多张图片的浮动

来源：互联网发布：免费微商城源码编辑：程序博客网时间：2024/05/17 00:05

<!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="aaa.jpg" width="100" style="z-index:2;filter:alpha(opacity=10);-moz-opacity:0.1;" />
<img src="aaa.jpg" width="100" style="z-index:3;filter:alpha(opacity=20);-moz-opacity:0.2;" />
<img src="aaa.jpg" width="100" style="z-index:4;filter:alpha(opacity=30);-moz-opacity:0.3;" />
<img src="aaa.jpg" width="100" style="z-index:5;filter:alpha(opacity=40);-moz-opacity:0.4;" />
<img src="aaa.jpg" width="100" style="z-index:6;filter:alpha(opacity=50);-moz-opacity:0.5;" />
<img src="aaa.jpg" width="100" style="z-index:7;filter:alpha(opacity=60);-moz-opacity:0.6;" />
<img src="aaa.jpg" width="100" style="z-index:8;filter:alpha(opacity=70);-moz-opacity:0.7;" />
<img src="aaa.jpg" width="100" style="z-index:9;filter:alpha(opacity=80);-moz-opacity:0.8;" />
<img src="aaa.jpg" width="100" style="z-index:10;filter:alpha(opacity=90);-moz-opacity:0.9;" />
<img src="aaa.jpg" width="100" style="z-index:11;" onmouseover="clearTimeout(a);" onmouseout="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>