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

本文给出了一个例子来描述jQuery实现的模拟雨滴下落的动画效果。分享给大家参考，如下：

效果如下：

实现思路：每x秒，定时器生成宽度和高度随机，下落速度(即动画执行时间)随机，向左的div。

1.CSS:

车身{ overflow:隐藏；/*这是为了防止滚动条*/}。com { border-radius : 0 50% 50% 50%；背景skyblue变压器：旋转(45)；绝对位置：top : 0；}2.JS:

$(function(){ var obj={ maxw :100，//最大宽度minW:10，//最小宽度maxSpeed:10000，///最大速度，单位ms creat:400//创建雨滴的速度，单位ms } rain(obj)})var minW=obj . minW；var maxSpeed=obj.maxSpeedvar time=obj.creatvar maxLeft=$(窗口)。宽度()；var time1var j=0；time 1=setInterval(function(){ var width=math . random()* MaxW；//随机宽度width=width . tofixed(2)；if(width MinW){ width=MinW；} var left=math . random()* maxLeft-width；//随机左值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；宽度： '宽度' px；高度： '宽度' px '/div '；//创建雨滴$('body ')。追加(项)；移动($(')。rain' j)，速度)；//雨滴运动}、时间)}函数move (op、speed) {var winh=$ (window)。高度()；var MaxH=WinH op . height()；//雨滴落下的高度，页面高度加上自己的高度就可以说明它们完全落到了底部op. animal ({'top' : maxh' px'}，speed，function(){ op . remove()；//删除雨滴})；}刚开始想计算雨滴向左下落高度的最大值来避开滚动条，后来想加一个溢出：直接隐藏到身体。省掉多余的代码效果不也一样吗？

除了使用JS，还可以通过canvas实现。

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

在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun

在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun

关于jQuery的更多信息，请查看本网站专题：《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》。

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