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封装的分页组件
Jun 26 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jQuery实现日历效果
Sep 11 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
php实现多城市切换特效
2015/08/09 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
php获取linux命令结果的实例
2017/03/13 PHP
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
Angular排序实例详解
2017/06/28 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
python简单程序读取串口信息的方法
2015/03/13 Python
在Python中移动目录结构的方法
2016/01/31 Python
Django与JS交互的示例代码
2017/08/23 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
面向对象设计的原则是什么
2013/02/13 面试题
服装厂厂长岗位职责
2013/12/27 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
关于感恩的作文
2019/08/26 职场文书
Node.js实现断点续传
2021/06/23 Javascript
MYSQL 表的全面总结
2021/11/11 MySQL