您的位置：首页 > 其它

实现多张图片浮动的效果

2012-02-24 15:36 423 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航