CSS Styles
Copy Code code as follows:
<style type= "Text/css" >
. box{border-left:5px solid #F93; border-right:5px solid #F93; border-bottom:10px solid #F93; 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; position:absolute;top:250px;left:500px;z-index:999; Overflow:hidden;}
. water{background: #09F; width:100%; position:absolute; bottom:0px;}
</style>
Javascript
Copy Code code as follows:
<script>
width:400,
HEIGHT:300,
Pic: ' Water-drop.png ',//Rain picture defaults to Water-drop.png
speed:1000,//Rain speed
NUM:100,//density of Raindrops
Dir:[' right ', 160],//The Drift of rain to the default is the deviation of raindrops
$ (function () {
$ (". Container"). Rain ({width: ' 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>
Oh "water-drop.png" for the small rain icon, can be changed to other pictures of snow ah, hail ah, the next money will do
