jQuery实现的模仿雨滴下落动画效果


Posted in jQuery onDecember 11, 2018

本文实例讲述了jQuery实现的模仿雨滴下落动画效果。分享给大家供大家参考,具体如下:

效果如图:

 jQuery实现的模仿雨滴下落动画效果

实现思路:定时器每隔x秒生成宽高、下落速度(即动画执行时间)、left随机的div。

1.CSS:

body{
  overflow: hidden;/*这是为了防止出现滚动条*/
}
.com{
  border-radius: 0 50% 50% 50%;
  background: skyblue;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
}

2.JS:

$(function(){
  var obj={
    maxW:100,//最大宽度
    minW:10,//最小宽度
    maxSpeed:10000,//最大速度,单位ms
    creat:400//创建雨滴个数的快慢,单位ms
  }
  rain(obj)
})
function rain(obj){
  var maxW=obj.maxW;
  var minW=obj.minW;
  var maxSpeed=obj.maxSpeed;
  var time=obj.creat;
  var maxLeft=$(window).width();
  var time1;
  var j=0;
  time1=setInterval(function(){
    var width=Math.random()*maxW;//随机宽度
    width=width.toFixed(2);
    if(width<minW){
      width=minW;
    }
    var left=Math.random()*maxLeft-width;//随机left值
    left=left.toFixed(2);
    if(left<0){
      left=0;
    }
    j++;
    var speed=Math.random()*maxSpeed;//随机速度
    var item='<div class="com rain'+j+'" style="left:'+left+'px;width:'+width+'px;height:'+width+'px"></div>';//创建雨滴
    $("body").append(item);
    move($(".rain"+j),speed);//雨滴移动
  },time)
}
function move(op,speed){
  var winH=$(window).height();
  var maxH=winH+op.height();//雨滴下落的高度,页面高度加上自身高度就能看到完全落到最底部
  op.animate({
    "top":maxH+"px"
  },speed,function(){
    op.remove();//删除该雨滴
  });
}

本来最开始想计算雨滴left和下落高度的最大值,以免出现滚动条,但是后来想直接body加个overflow:hidden不是更好么,省去多余的代码,效果还一样。

除了用JS实现,还可以用canvas来实现。

感兴趣的朋友可以使用如下工具测试上述代码运行效果:

在线HTML/CSS/JavaScript代码运行工具:
http://tools.3water.com/code/HtmlJsRun

在线HTML/CSS/JavaScript前端代码调试运行工具:
http://tools.3water.com/code/WebCodeRun

更多关于jQuery相关内容还可查看本站专题:《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 #jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 #jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 #jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 #jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 #jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 #jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 #jQuery
You might like
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
input 高级限制级用法
2009/03/26 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
python使用any判断一个对象是否为空的方法
2014/11/19 Python
python中Genarator函数用法分析
2015/04/08 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
python编写简单爬虫资料汇总
2016/03/22 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
python最长回文串算法
2018/06/04 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
介绍一下write命令
2012/09/24 面试题
售后专员岗位职责
2013/12/08 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
影视广告专业求职信
2014/09/02 职场文书
村官个人总结范文
2015/03/03 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL