实现多张图片浮动的效果

来源：互联网发布：如何去痘印知乎编辑：程序博客网时间：2024/04/28 05:18

<!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 onload="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;" onmouseover="clearTimeout(a);" onmouseout="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>