淘气的小丁-使用jQuery实现漂浮气球的效果

使用jQuery实现漂浮气球的效果

我们实现的这个效果需要用jQuery直接生成这些气球。

1.我们先看一下一个气球的样式，首先我们放一个div类名为ym，这个div是用来装这些气球的，所以我们先来给他设置样式："height": "100vh",

" box-sizing": "border-box",  "overflow":" hidden",

"display": "flex","flex-wrap":"wrap",

“background": "url('../../Content/images/flower1.jpeg')",这是在jQuery中设置的样式。

2.我们在类名为ym的div中先放一个div类名为piq用来设置样式，我们先把样式设置好等下就可以直接生成更多的div来做气球，所以我们先来设置样式：width:100px; height:100px; background:#4cff00;border-radius:85px 85px 75px 75px; position:relative; top:100vh;我们只是给他设置了气球的本身，我们还差一点东西，就是绳子。

3.所以我们还要设置绳子，.piq::before{

content:"▲"; display:block;position:absolute;top:95px;left:40px;}

.piq::after{content:"";display:block;width:1px;height:50px;

position:absolute;top:112px;left:48px;background:#ff0000;}

4.我们的第一个气球的样式就写好了接下来我们就用jQuery来动态生成更多的气球.

5.首先我们封装三个函数，名字分别为ff，qq，random。

6.我们先看最后的那个函数random，我们需要给这个函数传一个参数a1，我们直接让这个函数返回一句代码，Math.floor(Math.random() * a1);这句代码表示Math对象里有一个floor的方法这个方法的意思就是对里面的数进行向下舍入，而他里面的数又是一个Math对象里的一个的方法名为random()，它的意思为返回 0 ~ 1 之间的随机数。[0,1），我们现在不知道需要几到几的随机数，所以我们在这个方法后面乘了我们传进来的参数，写完这个函数接下来我们写qq这个函数。

7.1在qq这个函数中我们需要先声明四个变量分别为a,b,c,time，前三个变量我们用来放颜色的随机数，var a = random(255);var b = random(255);var c = random(255);，我们在这三个变量中调用我们刚才写的random函数，在这个函数中传入255，作为实参传入random函数中，因为我们的颜色值就是在0到255之间.

2.最后一个time变量我们用来放时间的随机数，var time = random(5000) + 5000;因为我们的时间在这里是按毫秒算的，所以我们让这个时间在5秒到10秒之间取随机数。

3.写完了变量我们就来给气球设置不同的颜色，首先我们要先获取到气球并且在他的css方法里面改变背景，我们在一个中括号中写因为我们要设置的不止背景，background: 'rgba(' + a + ',' +b+ ',' +c+ ',0.7)',第一个我们设置背景，我们需要用的字符串的拼接，把我们刚才的变量abc放进去，background里的rgba中前三个是设置背景颜色的，最后一个是设置透明度的。

4. "box-shadow": "inset -5px -5px 7px rgba(" + a + "," +b+ "," +c + ",1.00)",这个box-shadow是设置阴影效果的，它里面有几个值，首先第一个inset是设置阴影的走向（往里），-5px -5px 7px这三个是设置阴影的大小，最后一个是设置阴影的颜色。

5. color: 'rgba(' + a + ',' + b + ',' + c + ',0.7)',这个就是设置颜色的。

6.我们设置好了气球的样式，现在我们要让气球动起来，所以我们还是得获取气球，有一个animate的方法，这个就是设置让气球动起来的方法，animate(params,[speed],[easing],[fn])他里面有四个参数每个参数的含义为：params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

fn:在动画完成时执行的函数，每个元素执行一次。

所以我们先设置一下样式，设置它的top值为-300vh，vh的意思为可视区域的高度，我们再来设置运动的时间，设置为time，也就是我们上面声明的变量，再设置运动的曲线，是先快后慢还是先慢后快，我们这里设置的是它自带的属性swing，向上运动已经写完了，但是这样他只会运动一次，所以我们还要在设置一个animate的方法，这个方法里面我们只需要让它的top值在0秒钟回到最底部就好了，这样他就可以实现一个无线循环的效果。

8.我们现在写第一个函数ff，这个函数的作用就是动态创建气球，首先我们需要写一个for循环，再声明一个变量i赋值为100，并且让他大于零，并且i--，在for循环内，我们先获取放气球的div，把我们创建好的气球的div标签通过append方法添加进去，我们再获取一下气球的div用css的方法给他设置背景，让它的背景值调用我们写的qq函数，最后在for循环外面写一个计时器，让他每5秒钟调用qq这个函数。

9.最后我们在一个ready事件里面调用ff这个函数。这样我们就写完了所有的代码，我们再看一下气球的效果：