L'effet de pluie du conteneur personnalisé jquery peut changer l'icône de pluie en quelque chose d'autre

L'effet de pluie du conteneur personnalisé jquery peut changer l'icône de pluie en quelque chose d'autre_jquery

WBOY

Libérer： 2016-05-16 16:51:24

original

1297 Les gens l'ont consulté

L'effet de pluie du conteneur personnalisé jquery peut changer l'icône de pluie en quelque chose d'autre_jquery

style CSS

Copier le code Le code est le suivant :

 
< ;style type ="text/css"> 
.box{border-left:5px solid #F93;border-right:5px solid #F93;border-bottom:10px solid #F93;largeur:100px;hauteur : 60px ; position :absolue;haut:250px;gauche:300px;z-index:999; débordement:caché;} 
.box2{border-left:5px solid #F93;border-right:5px solid #F93;border -bas : 10px solide #F93 ; largeur : 100 px ; hauteur : 60px ; position : absolue ; haut : 250 px ; gauche : 500 px ; z-index : 999 ; débordement : caché ;} 
.water{ background :#09F ; largeur : 100 % ; position : absolue ; bas : 0px;} 
 

javascript

Copier le code Le code est le suivant :

<script> <br><br>//largeur:400, <br>//hauteur:300, <br>//pic:' water-drop.png', //L'image de pluie par défaut est water-drop.png <br>//speed:1000, //Vitesse de la pluie<br>//num:100, //Densité des gouttes de pluie<br> //dir:['right',160], //La direction par défaut de la pluie est la déviation des gouttes de pluie vers la droite<br><br><br>$(function(){ <br> $(".container" ).Rain({width:'500',dir:['right',100],speed:3000,num:100,func:back_func} <br><br><br>); }) <br>var i =0; <br>function back_func(d){ <br>if(parseInt($(".box").position()['left'] $(".box"). width())> d&&d>parseInt($(".box").position()['left'])){ <br>if(i>$(".box").height()){ <br>$(". box .water").animate({height:0}); <br>i=0; <br>return <br>} <br>$(".box .water"). animer({hauteur:i }); <br>} <br><br>if(parseInt($(".box2").position()['left'] $(".box2").width() )>d&&d>parseInt ($(".box2").position()['left'])){ <br>if(i>$(".box2").height()){ <br>$ (".box2 .water ").animate({hauteur:0}); <br>i=0; <br>return <br>} <br>$(".box2 .water").animate({ hauteur:i }); <br>} <br>} <br></script> 

html 
 "boîte">

< /div> Tout va bien

Étiquettes associées：

jquery 下雨容器

source：php.cn

Article précédent：JS optimise la balise img et utilise onerror pour afficher les compétences image_javascript par défaut Article suivant：Exemple d'implémentation javascript du stockage des connaissances hmtl string_Basic

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur