脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jquery 自定义容器下雨效果可将下雨图标改为其他，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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&amp;&d>parseInt($(".box2").position()['left'])){
if(i>$(".box2").height()){
$(".box2 .water").animate({height:0});
i=0;
return;
}
$(".box2 .water").animate({height:i++});
}
}
</script>

htML
<p class="container">
<p class="box"><p class="water"></p></p>
<p class="box2"><p class="water"></p></p>
</p>

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

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jquery 自定义容器下雨效果可将下雨图标改为其他全部内容，希望文章能够帮你解决javascript代码实例教程-jquery 自定义容器下雨效果可将下雨图标改为其他所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。