jqueryカスタムコンテナの雨エフェクトは雨アイコンを他のものに変更できます_jquery

css スタイル

コードをコピー コードは次のとおりです:

< ;style type ="text/css">
.box{border-left:5px ソリッド #F93;border-right:5px ソリッド #F93;border-bottom:10px ソリッド #F93;width:100px;height: 60px; 位置 :absolute;top:250px;left:300px;z-index:999;overflow:hidden;}
.box2{border-left:5px 実線 #F93;border-right:5px 実線 #F93; -bottom: 10px ソリッド #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;}

javascript

コードをコピー🎜> コードは次のとおりです:

<script> <div class="codebody" id="code19962"> <br>//幅:400、<br>//高さ:300、<br>//pic:'water-drop.png', //デフォルトの雨の写真はwater-drop.png <br>//speed:1000, //雨の速度<br>//num:100, //密度of Raindrops<br> //dir:['right',160], //デフォルトの雨の方向は右への雨滴の偏りです<br><br><br>$(function(){ <br> $(".container" ).Rain({width:'500',dir:['right',100],speed:3000,num:100,func:back_func}); }) <br>var i =0; <br>function back_func(d){ <br>if(parseInt($(".box").position()['left'] $(".box"). width())> d&>parseInt($(".box").position()['left'])){ <br>if(i>$(".box").height()){ <br>$(".box .water").animate({height:0}); <br>i=0; <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({高さ:0}); <br>return; <br>} <br>$(".box2 .water").animate({高さ:i }); <br>} <br>} <br></script>

html

"ボックス">

/div> すべてOKです