Jquery custom container rain effect can change the rain icon to other
- 2020-03-30 02:42:46
- OfStack
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/201404231743112.gif? 2014323174341 ">
CSS styles
javascript
Ha ha "water-drop. PNG" for the small icon of rain, can be changed to other pictures snow, hail, money
CSS styles
<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',// The rain image The default is water-drop.png
//speed:1000, // The rain quickly
//num:100, // The density of raindrops
//dir:['right',160], // With the rain The default is to float to the right Deviation of raindrops
$(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>
Ha ha "water-drop. PNG" for the small icon of rain, can be changed to other pictures snow, hail, money