For the rain effect of jquery custom containers, you can change the rain icon to another one.

This article describes how to change the rain icon of A jquery custom container to another one. For more information, see
Css style

The Code is as follows:

Javascript

The Code is as follows:

Script

// Width: 400,
// Height: 300,
// Pic: 'water-drop.png ', // The Rain image watermark is water-drop.png
// Speed: 1000, // rain Rate
// Num: 100, // The intensity of raindrops
// Dir: ['right', 160], // by default, the rain drops to the right.


$ (Function (){
$ (". Container "). rain ({width: '000000', dir: ['right', 500], speed: 100, num: 3000, 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

In the same breath, the water-drop.png icon is a small rain icon. You can change it to another image.