Der Regeneffekt des benutzerdefinierten Containers von jquery kann das Regensymbol in etwas anderes ändern

Der Regeneffekt des benutzerdefinierten Containers von jquery kann das Regensymbol in etwas anderes ändern_jquery

WBOY

Freigeben： 2016-05-16 16:51:24

Original

1301 Leute haben es durchsucht

Der Regeneffekt des benutzerdefinierten Containers von jquery kann das Regensymbol in etwas anderes ändern_jquery

CSS-Stil

Code kopieren Der Code lautet wie folgt:

 
< ;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; unten:0px;} 
 

Javascript

Code kopieren Der Code lautet wie folgt:

//width:400,

//height:300,
//pic:'water-drop.png', //Das Standard-Regenbild ist water-drop.png
//speed:1000, //Regengeschwindigkeit
//num:100, //Dichte der Regentropfen
//dir:['right',160], //Die Standardrichtung des Regens ist die Abweichung der Regentropfen nach rechts

$(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; 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; height:i });
}
}

"box">< ;div class="water">

< /div> Alles ist in Ordnung

Verwandte Etiketten：

jquery 下雨容器

Quelle：php.cn

Vorheriger Artikel：JS optimiert das img-Tag und verwendet onerror, um die Standardfähigkeiten von image_javascript anzuzeigen Nächster Artikel：Beispiel für eine Javascript-Implementierung zum Speichern von HTML-String_Grundkenntnissen

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors