Heim >Web-Frontend >js-Tutorial >Der Regeneffekt des benutzerdefinierten Containers von jquery kann das Regensymbol in etwas anderes ändern_jquery
Der Regeneffekt des benutzerdefinierten Containers von jquery kann das Regensymbol in etwas anderes ändern_jquery
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-05-16 16:51:241328Durchsuche
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:
//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 });
}
}
//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
Stellungnahme：
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
Vorheriger Artikel：JS optimiert das img-Tag und verwendet onerror, um die Standardfähigkeiten von image_javascript anzuzeigenNächster Artikel：JS optimiert das img-Tag und verwendet onerror, um die Standardfähigkeiten von image_javascript anzuzeigen
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse