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

css样式

复制代码 代码如下:

javascript

复制代码 代码如下:

<script> <br><br>//width:400, <BR>//height:300, <BR>//pic:'water-drop.png',//下雨图片 默认为water-drop.png <BR>//speed:1000, //雨速 <BR>//num:100, //雨滴的密集度 <BR>//dir:['right',160], //雨的飘向 默认为向右飘 雨滴的偏差 <br><br><BR>$(function(){ <BR>$(".container").Rain({width:'500',dir:['right',100],speed:3000,num:100,func:back_func}); <br><br><BR>}) <BR>var i =0; <BR>function back_func(d){ <BR>if(parseInt($(".box").position()['left']+$(".box").width())>d&&d>parseInt($(".box").position()['left'])){ <BR>if(i>$(".box").height()){ <BR>$(".box .water").animate({height:0}); <BR>i=0; <BR>return; <BR>} <BR>$(".box .water").animate({height:i++}); <BR>} <br><br>if(parseInt($(".box2").position()['left']+$(".box2").width())>d&&d>parseInt($(".box2").position()['left'])){ <BR>if(i>$(".box2").height()){ <BR>$(".box2 .water").animate({height:0}); <BR>i=0; <BR>return; <BR>} <BR>$(".box2 .water").animate({height:i++}); <BR>} <BR>} <BR></script>

html

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