使用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这个函数。这样我们就写完了所有的代码，我们再看一下气球的效果：

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

Java实现动态加载页面_[Java教程]动态加载页面数据的小工具 javascript + jQuery （持续更新）...
[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新) 0 2014-05-07 18:00:06 使用该控件,可以根据url,参数,加载html记录模板(包含 ...
小猿圈用jQuery实现手风琴图片展示效果
对web前端了解的同学会知道jQuery是现在前端中使用的框架之一,但是你知道jQuery可以做到一些你意想不到的效果吗?下面小猿圈web前端老师用jQuery实现手风琴图片展示效果,希望对你有所帮助 ...
小清新的jQuery ck-slide 图片轮播
ck_slide 是一款小清新的jQuery 幻灯片插件,它非常小巧,压缩后仅 3KB,基本功能可以满足.它支持淡入淡出/左右滚动.箭头/圆点控制.自动播放. 在线实例默认(淡入淡出) 左右滚动自 ...
小清新的jQuery 幻灯片jQuery ck-slide 图片轮播
ck_slide 是一款小清新的jQuery 幻灯片插件,它非常小巧,压缩后仅 3KB,基本功能可以满足.它支持淡入淡出/左右滚动.箭头/圆点控制.自动播放. 在线实例默认(淡入淡出) 左右滚动自 ...
Jquery JQZoom Plugin 放大鏡效果 Two
Jquery JQZoom Plugin 放大鏡效果 Two Jquery1.3.2Lib下載地址:http://files.cnblogs.com/davidzhou/jquery-1.3.2.ra ...
手风琴html例子,jquery实现简单手风琴菜单效果实例
本文实例讲述了jquery实现简单手风琴菜单效果的方法.分享给大家供大家参考.具体实现方法如下: dd').hide(); $('.accordion > dt > a').click(f ...
php产品效果图,jQuery_基于JQuery制作的产品广告效果，效果图.如下：动画效果介绍 - phpStudy...
基于JQuery制作的产品广告效果效果图.如下: 动画效果介绍:这组广告效果是打开页面后图片会自动播放,从1-5共计5张图片,如果属标放到右下角的1.2.3.4.5列表上,可以自由进行切换到自己想看 ...
使用jQuery创建模态窗口登陆效果
来源:GBin1.com 在线下载在线演示隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素.社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看到的表单.在博 ...
html怎么显示一个点赞的心形,jquery心形点赞关注效果的简单实现
html代码 css代码 .heart { width: 100px; height: 100px; background: url("") no-repeat; backgrou ...
Jquery Magnify Plugin 放大鏡效果 One
Jquery Magnify Plugin 放大鏡效果 One Jquery1.3.2Lib下載地址:http://files.cnblogs.com/davidzhou/jquery-1.3.2.r ...

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

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

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

最新文章

热门文章