实现多张图片的浮动代码

来源:互联网 发布:程序员团队名称和口号 编辑:程序博客网 时间:2024/04/29 19:20
 

关键部分

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

原创粉丝点击