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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery实现手风琴特效
Jan 11 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
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
Python之文字转图片方法
2018/05/10 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
公司财务总监岗位职责
2013/12/14 职场文书
开会迟到检讨书
2014/02/03 职场文书
员工保密承诺书
2014/05/28 职场文书
力学专业求职信
2014/07/23 职场文书
环境保护建议书
2014/08/26 职场文书
婚庆答谢词
2015/01/04 职场文书
老兵退伍感言
2015/08/03 职场文书
Golang gRPC HTTP协议转换示例
2022/06/16 Golang