jquery 自訂容器下雨效果可將下雨圖示改為其他_jquery

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:10pxsolid #F93;width:100px;height:60px; position:absolute;top:250px;left:500px;z-index:999; overflow:hidden;}
.water{ background:#09F;width:100%; 。 🎜> 程式碼如下:

<script> <a style="CURSOR: pointer" data="19962" class="copybut" id="copybut19962" onclick="doCopy('code19962')"><U>//width:400, //height:300, //pic:'water-drop. png',//下雨圖片預設為water-drop.png </script>//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 .水").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 .水").animate({height:i });
}
}


html

呵呵「water -drop.png」為下雨的小圖標，可以改成其它的圖片下雪啊，下冰雹啊，下錢都行