plug-in_jquery de balise cloud dynamique jQuery

Avant-propos :

Récemment, je m'intéresse particulièrement à l'encapsulation de plug-in de js Avec la technologie actuelle, il est encore difficile d'encapsuler complètement js, j'ai donc encapsulé un petit plug-in basé sur jQuery, et il a été développé sur cette base. le niveau de l'objet. Ne pas ajouter de méthode globale. Il n'y a presque pas de syntaxe avancée. Il existe une méthode return: foreach() pour renvoyer l'instance d'objet elle-même, et une fonction extend() pour étendre les propriétés de l'objet paramètre. Ceci sert également à faciliter le chaînage de l'objet après ajustement. ma méthode. tapez l’opération.

Adresse de téléchargement du package de plug-in : Cliquez ici pour télécharger

Nom du plug-in : Dynamic Cloud Tag

Fonctionnalités du plug-in :

Générer dynamiquement une balise dans l'élément de niveau bloc spécifié
La hauteur, la largeur, la position, le nombre de calques et la couleur d'arrière-plan d'une étiquette sont contrôlables de manière aléatoire
L'étiquette a apparaît et disparaît en fondu, et la transparence initiale peut être modifiée
La vitesse de création d'une étiquette et la vitesse de déplacement sont contrôlables (minuterie)
La taille du pas d'un mouvement d'étiquette peut être contrôlée (distance parcourue à chaque cycle)
Lorsque la souris survole, l'animation sera arrêtée avec une transparence maximale et le plus grand nombre de calques. Lorsque la souris partira, l'état précédent sera restauré
. Rencontrer un problème :

À l'heure actuelle, le plug-in peut fonctionner normalement, mais si vous changez d'onglet du navigateur et que la page du plug-in ne s'affiche pas, puis revenez après un certain temps, il y aura un décalage, je ne sais pas. quelle est la situation pour le moment. S'il vous plaît, donnez-moi quelques conseils si vous en savez plus, il y a beaucoup de domaines qui doivent être optimisés. Si vous avez de bonnes idées, n'hésitez pas à les apporter afin que je puisse apporter des corrections. en temps opportun.

Effet d'animation :

Khan : L'image gif est peut-être un peu grande et bougera au bout d'un moment. Soyez patient

Extrait de code JS :

Copier le code Le code est le suivant :

(fonction($){
$.fn.activiTag = fonction (opts) {
         opts = $.extend({
             move_step:2, // taille du pas de mouvement de l'élément--px
             move_speed:40, // Vitesse de déplacement de l'élément--ms
               init_speed:1000,//Vitesse de création d'éléments--ms
                                                                                                                                          min_opacity:0,                max_grain : 10, // Taille maximale des grains
// un tableau de balises
a_List : ["Veuillez ajouter des éléments","Explication détaillée de Spring Jpa","javamailmail"], // un tableau de chaînes de balises
                        // Tableau de couleurs d'arrière-plan
            color_List : ['#CD2626','#8b4513','#696969','#ff8c00','#6495ED']                                                                                                                                      ;            },opts||{});
                             
        var aTag = $(this); // Objet conteneur actuel
        var T_width = aTag.width(), T_height = aTag.height(); // Hauteur du conteneur, largeur
                             
          renvoie this.each(function(){
                                                                    Fonction settatagcss() {// Définit le CSS correspondant
               aTag.css({position:'relative',overflow:'hidden'});
            }
                                                                                      function getRandomNum(Min, Max){ // Obtenez des nombres aléatoires dans deux intervalles
Min = nouveau Nombre(Min);Max = nouveau Nombre(Max);
              var Range = Max - Min 1 ;
              var Rand = Math.random();
                    return Min Math.floor(Rand * Range);
            }
                                                                    Fonction getrandomxy (num) {// Renvoie aléatoirement un paramètre positif/négatif
                  num = nouveau numéro (num);                              Si(Math.random()<=0.5)
                num = -num;
                        return num
            }
                                                                                   /**
* Créez aléatoirement une balise d'une largeur d'un tiers de la largeur du conteneur, puis basée sur elle-même - un cinquième de la largeur
                 * La hauteur est égale à un tiers de sa propre largeur, puis à - un tiers
                               */
              fonction createATag() {
              var i = getRandomNum(0,opts.a_List.length-1);
              var a = $(opts.a_List[i]);               aTag.append(a);
                      renvoyer un ;
            }
                                                                                   /**Définir un style CSS de balise **/
              fonction setCss(a) {
              var w = Math.ceil(T_width/3) getRandomXY(T_width/60);
                     var h = Math.ceil(w/3) getRandomXY(w/36); // Hauteur de la ligne
                    var zIndex = Math.ceil(Math.random()*400);               var rdmOpcy = getRandomNum(new Number(opts.min_opacity),0);
// Hauteur du trait, nombre de calques, transparence
a.css({
                  opacité:rdmOpcy,
                     zIndex : zIndex,
                       lineHeight:h 'px',
position : 'absolue',
                       textDécoration : 'aucun',
                        textAlign:'center',
                       borderRadius : '3px',
                     couleur : '#FFFFFF',
                      whiteSpace : 'nowrap',
                });
                      renvoyer un ;
            }
                                                                                   /**Calculer la position initiale de l'étiquette par rapport au conteneur (coordonnées X_Y) **/
              fonction setXY(a) {
              var x = getRandomNum(0,(T_width-a.width()));
                var y = getRandomNum(0,T_height/10);
                a.css({gauche:x 'px', bas:y 'px'});
                      renvoyer un ;
            }
                                                                                   /**Définir une couleur d'arrière-plan aléatoire **/
              fonction setColor(a) {
            var i = Math.ceil(Math.random()*opts.color_List.length -1);
a.css({backgroundColor:opts.color_List[i]})
            }
                                                                                   /**Entrée du constructeur **/
             fonction construct() {
            var a = createATag();
                      setCss(a);                    setColor(a); // couleur
                     setXY(a);                       renvoyer un ;
            }
                                                                                   /**Fonction minuterie d'animation **/
              function interVal(a,s_opcy,botm,n,space,s) {
              var opcy = a.css('opacity'); // Transparence
                  var botm_ = a.css('bottom').replace('px',''); // Distance inférieure en temps réel
              var opcy_ = parseFloat(new Number(a.css('opacity'))) s_opcy; // Transparence
                   var _opcy_ = parseFloat(new Number(a.css('opacity'))) - s_opcy; // --Transparency
                     var fall = botm_ - botm; // Distance déplacée
                         botm_ = new Number(botm_) new Number(opts.move_step);
a.css({
                      affichage : 'bloquer',
                    en bas : botm_,
                });
                                                                     Si (chute < n)
{A.CSS ({OPACITY : OPCY_})}
                         else if(2*n < fall)
                                                                                                                                   ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,                                                                           Si (botm_ >= espace)
                                                {
                                                                                                                                                                                                                                                                                                                   a.remove();
                }
            }
                                                                                  fonction init() {
If(aTag.children('a').length >= new Number(opts.max_grain))
Retournez
            var a = construct();
              var opcy = a.css('opacity'); // Transparence
              var zInx = a.css('zIndex');               var botm = a.css('bottom').replace('px',''); // Distance initiale jusqu'au bas
                 var space = T_height - a.height() - a.css('bottom').replace('px',''); // Distance à parcourir
                                                                                     var n = espace/3 ;               var step = 1-opcy ;                     var sec = n/opts.move_step*opts.move_speed/1000; // Distance/longueur d'un pas unique * longueur d'un pas unique secondes = nombre de secondes requises
                   var s_opcy = opts.move_speed/1000/sec * step ; // La valeur de transparence qui doit être transformée dans chaque boucle
            var speed_ = getRandomNum(new Number(opts.move_speed)-30,new Number(opts.move_speed) 30);
Var Curropcy; // Enregistre la transparence lorsque la souris est déplacée
//                     console.log(opts.move_speed '....' speed_)
                     /**Boucle de mouvement des éléments **/
              var s = setInterval(function(){
                          interVal(a,s_opcy,botm,n,space,s);
                  }, speed_)
                                                                     A.Mouseover (fonction () {// mouvements de la souris
                currOpcy = a.css('opacity');
                                                                                                                                                                                                                                                                                                $(this).css({
                          zIndex : 401,
Opacité : 1
                     });
                });
                                                                                      a.mouseout(function(){ // Souris sortie
$(this).css({
                        zIndex : zInx,
Opacité : currOpcy
                     });
                     s= setInterval(function(){
                               interVal(a,s_opcy,botm,n,space,s);
                          },speed_);
                });
            }
                setATagCss();
               setInterval(init,opts.init_speed);
});
>
})(jQuery)



HTML :

Copier le code

Le code est le suivant :

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">





<script><br> $(fonction(){<br>     $('#tag').activiTag({});<br> });<br> </script>