jquery 自定义容器下雨效果可将下雨图标改为其他

css样式
复制代码代码如下:
<style type="text/css">
.box{border-left:5px solid #F93;border-right:5px solid #F93;border-bottom:10px solid #F93;width:100px;height:60px; position:absolute;top:250px;left:300px;z-index:999; overflow:hidden;}
.box2{border-left:5px solid #F93;border-right:5px solid #F93;border-bottom:10px solid #F93;width:100px;height:60px; position:absolute;top:250px;left:500px;z-index:999; overflow:hidden;}
.water{ background:#09F;width:100%; position:absolute; bottom:0px;}
</style>

javascript
复制代码代码如下:
<script>

//width:400,
//height:300,
//pic:"water-drop.png",//下雨图片默认为water-drop.png
//speed:1000, //雨速
//num:100, //雨滴的密集度
//dir:["right",160], //雨的飘向默认为向右飘雨滴的偏差

$（function（）{
$（".container"）.Rain（{width:"500",dir:["right",100],speed:3000,num:100,func:back_func}）;

}）
var i =0;
function back_func（d）{
if（parseInt（$（".box"）.position（）["left"]+$（".box"）.width（））>d&&d>parseInt（$（".box"）.position（）["left"]））{
if（i>$（".box"）.height（））{
$（".box .water"）.animate（{height:0}）;
i=0;
return;
}
$（".box .water"）.animate（{height:i++}）;
}

if（parseInt（$（".box2"）.position（）["left"]+$（".box2"）.width（））>d&&d>parseInt（$（".box2"）.position（）["left"]））{
if（i>$（".box2"）.height（））{
$（".box2 .water"）.animate（{height:0}）;
i=0;
return;
}
$（".box2 .water"）.animate（{height:i++}）;
}
}
</script>

html
<div class="container">
<div class="box"><div class="water"></div></div>
<div class="box2"><div class="water"></div></div>
</div>

呵呵“water-drop.png”为下雨的小图标，可以改成其它的图片下雪啊，下冰雹啊，下钱都行