使用javascript实现多个图片漂浮的效果（完善火狐滤镜功能）

最新推荐文章于 2021-06-04 15:25:49 发布

哈佛凌晨

最新推荐文章于 2021-06-04 15:25:49 发布

阅读量2.4k

点赞数 2

分类专栏： javascirpt 学习笔记文章标签： javascript filter float 2010 xhtml function

本文链接：https://blog.csdn.net/dyushuo6230/article/details/7288771

版权

学习笔记同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

javascirpt

19 篇文章 1 订阅

订阅专栏

实现多张图片漂浮的效果就是几张图片像排队一样后边的图片跟着前边的图片一起来回撞动。现在应该完善了吧。火狐也能滤镜了嘿嘿。

效果图如下：

思路和单个图片的思路完全一样，就是将每个图片的坐标和速度都放到数组里，用循环改变每一张图片的位置就ok！

下边是代码，注意图片没链接！！

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

<img src="20100826052404.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;
//将图片的速度和起始坐标写到数组，比如某张图片的坐标就用(x[i],y[i])表示...因为每张图片碰到的边缘的时间不同所以他们的速度改变不同，所以每个图片都有自己的速度，
//开始我值考虑到了坐标变化，而没考虑速度变为负数的的先后顺序，呵呵，在家不要犯同样的错误嗯。
var xSpeed = new Array(), ySpeed = new Array(), x = new Array(), y = new Array();
//使用imgs.length获取图片的个数作为循环的次数
for(var i=0;i<imgs.length;i++){
   //设置每张图片的速度（X和Y的增长速度）都是3。
   xSpeed[i] = 3; ySpeed[i] = 3;
   //设置他们的其实坐标点，第一个是（15，15）第二个就是（30，30），第三个（45，45）
   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++){
       //比较图片是否到达边界
   //如果到达边界后，控制图片改变方向，
   //当图片碰到底边缘的时候应该往上走，也就y轴达到最大值，应该缩小了（就是符合y>h这个条件），这时y的增长数xSpeed变为负数
   //当图片碰到右边缘的时候这时候该往左走，也就是x达到最大值，该缩小了。（就是符合x>w），这时y的增长数xSpeed变为负数
   //当图片碰到上边缘的时候图片的该往往下走了，也就是y的值为零的时候，增长数再次变为负数后将增大（符合y<0）
   //当图片碰到左边的时候，图片该往右走，也就是x的值为零的时候，增长数变为负数后将增大（符合x<0）
       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>

哈佛凌晨

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用javascript实现多个图片漂浮的效果（完善火狐滤镜功能）

实现多张图片漂浮的效果就是几张图片像排队一样后边的图片跟着前边的图片一起来回撞动。现在应该完善了吧。火狐也能滤镜了嘿嘿。效果图如下：思路和单个图片的思路完全一样，就是将每个图片的坐标和速度都放到数组里，用循环改变每一张图片的位置就ok！下边是代码，注意图片没链接！！无标题文档img{ position:absolute;
复制链接

扫一扫

专栏目录