jQuery dynamisches Cloud-Tag plug-in_jquery

Vorwort:

In letzter Zeit interessiere ich mich besonders für die Plug-in-Kapselung von js. Da es mit der aktuellen Technologie immer noch schwierig ist, js vollständig zu kapseln, habe ich ein kleines Plug-in basierend auf jQuery gekapselt und es wurde darauf basierend entwickelt die Objektebene. Keine globale Methode hinzufügen. Es gibt fast keine erweiterte Syntax. Es gibt eine Methode „return: foreach()“ zum Zurückgeben der Objektinstanz selbst und eine Funktion „extend()“ zum Erweitern der Eigenschaften des Parameterobjekts. Dies dient auch dazu, die Verkettung des Objekts nach der Anpassung zu erleichtern meine Methode Typ Operation.

Download-Adresse des Plug-in-Pakets: Klicken Sie hier zum Herunterladen

Plug-in-Name: Dynamic Cloud Tag

Plug-in-Funktionen:

Generieren Sie dynamisch ein Tag innerhalb des angegebenen Elements auf Blockebene
Die Höhe, Breite, Position, Anzahl der Ebenen und Hintergrundfarbe eines Etiketts sind zufällig steuerbar
Die Beschriftung wird ein- und ausgeblendet und die anfängliche Transparenz kann geändert werden
Die Geschwindigkeit der Etikettenerstellung und die Bewegungsgeschwindigkeit sind steuerbar (Timer)
Die Schrittgröße einer Etikettenbewegung kann gesteuert werden (in jedem Zyklus zurückgelegte Strecke)
Wenn die Maus schwebt, wird die Animation mit maximaler Transparenz und der höchsten Anzahl an Ebenen gestoppt. Beim Verlassen wird der vorherige Zustand wiederhergestellt
Es ist ein Problem aufgetreten:

Derzeit kann das Plug-in normal ausgeführt werden, aber wenn Sie die Browser-Registerkarte wechseln und die Plug-in-Seite nicht angezeigt wird und dann nach einer Weile zurückwechseln, wird es meiner Meinung nach eine Verzögerung geben Wie ist die Situation noch? Bitte geben Sie mir einen Rat, wenn Sie mehr darüber wissen. Wenn Sie gute Ideen haben, bringen Sie diese bitte zur Sprache.

Animationseffekt:

Khan: Das GIF-Bild ist möglicherweise etwas groß und bewegt sich nach einer Weile. Seien Sie geduldig

JS-Code-Snippet:

Code kopieren Der Code lautet wie folgt:

(Funktion($){
$.fn.activiTag = function(opts) {
         opts = $.extend({
             move_step:2, // Schrittgröße der Elementbewegung--px
             move_speed:40, // Elementbewegungsgeschwindigkeit--ms
               init_speed:1000,//Elementerstellungsgeschwindigkeit--ms
                                                                                                                                     min_opacity:0,                max_grain: 10, // Maximale Korngröße
// ein Tag-Array
a_List: ["Bitte fügen Sie Elemente hinzu","Detaillierte Erklärung von Spring Jpa","javamailmail"], // ein Tag-String-Array
                          // Hintergrundfarben-Array
            color_List: ['#CD2626','#8b4513','#696969','#ff8c00','#6495ED']                                                                                                                                 ;            },opts||{});
                             
        var aTag = $(this); // Aktuelles Containerobjekt
        var T_width = aTag.width(), T_height = aTag.height(); // Containerhöhe, Breite
                             
          return this.each(function(){
                                                                  Funktion settatagcss () {// Setzt das entsprechende CSS
               aTag.css({position:'relative',overflow:'hidden'});
            }
                                                                                   function getRandomNum(Min, Max){ // Zufallszahlen innerhalb von zwei Intervallen abrufen
Min = neue Zahl(Min);Max = neue Zahl(Max);
              var Range = Max - Min 1;
              var Rand = Math.random();
                    return Min Math.floor(Rand * Range);
            }
                                                                  Funktion getrandomxy (num) {// Gibt zufällig einen positiven/negativen Parameter zurück
                  num = neue Zahl(num);                              If(Math.random()<=0.5)
                num = -num;
                       Rückgabenummer;
            }
                                                                                 /**
* Erstellen Sie nach dem Zufallsprinzip ein Tag mit einer Breite von einem Drittel der Breite des Containers und dann basierend auf sich selbst – einem Fünftel der Breite
                 * Höhe ist ein Drittel seiner eigenen Breite, dann - ein Drittel
                               */
              Funktion createATag() {
              var i = getRandomNum(0,opts.a_List.length-1);
              var a = $(opts.a_List[i]);               aTag.append(a);
                      return a;
            }
                                                                                 /**Legen Sie einen Tag-CSS-Stil fest **/
              Funktion setCss(a) {
              var w = Math.ceil(T_width/3) getRandomXY(T_width/60);
                     var h = Math.ceil(w/3) getRandomXY(w/36); // Zeilenhöhe
                     var zIndex = Math.ceil(Math.random()*400);                 var rdmOpcy = getRandomNum(new Number(opts.min_opacity),0);
// Linienhöhe, Anzahl der Ebenen, Transparenz
a.css({
                  opacity:rdmOpcy,
                     zIndex: zIndex,
                       lineHeight:h 'px',
Position: 'absolut',
                       textDecoration:'none',
                        textAlign:'center',
                       borderRadius: '3px',
                     color:'#FFFFFF',
                      whiteSpace: 'nowrap',
                });
                      return a;
            }
                                                                                 /**Berechnen Sie die Anfangsposition des Etiketts relativ zum Behälter (X_Y-Koordinaten) **/
              Funktion setXY(a) {
              var x = getRandomNum(0,(T_width-a.width()));
              var y = getRandomNum(0,T_height/10);
                 a.css({left:x 'px', bottom:y 'px'});
                    return a;
            }
                                                                                 /**Zufällige Hintergrundfarbe festlegen **/
              Funktion setColor(a) {
            var i = Math.ceil(Math.random()*opts.color_List.length -1);
a.css({backgroundColor:opts.color_List[i]})
            }
                                                                                 /**Konstrukteurseintrag **/
             Funktion construction() {
            var a = createATag();
                      setCss(a);                                       setColor(a); // color
                     setXY(a);                     return a;
            }
                                                                                 /**Animations-Timer-Funktion **/
              function interVal(a,s_opcy,botm,n,space,s) {
              var opcy = a.css('opacity'); // Transparenz
              var botm_ = a.css('bottom').replace('px','' // Bodenabstand in Echtzeit
              var opcy_ = parseFloat(new Number(a.css('opacity'))) s_opcy; // Transparenz
                   var _opcy_ = parseFloat(new Number(a.css('opacity'))) - s_opcy; // --Transparency
              var fall = botm_ - botm; // Verschobene Distanz
                                   botm_ = new Number(botm_) new Number(opts.move_step);
a.css({
                     Anzeige: 'blockieren',
                     unten: botm_,
                });
                                                                      If(fall < n)
{A.CSS ({OPACITY: Opcy_})}
                        else if(2*n < fall)
                                                                                                                            ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,                                                                       If (botm_ >= Leerzeichen)
                                               {
                                                                                                                                                                                                                                                                                                   a.remove();
                }
            }
                                                                                Funktion init() {
If(aTag.children('a').length >= new Number(opts.max_grain))
                   zurück;
            var a = construction();
              var opcy = a.css('opacity'); // Transparenz
              var zInx = a.css('zIndex');               var botm = a.css('bottom').replace('px',''); // Anfangsabstand zum Boden
                 var space = T_height - a.height() - a.css('bottom').replace('px',''); // Distanz zum Verschieben
                                                                                      var n = Leerzeichen/3;               var step = 1-opcy;                    var sec = n/opts.move_step*opts.move_speed/1000; // Distanz/Einzelschrittlänge * Einzelschrittlänge Sekunden = Anzahl der benötigten Sekunden
                   var s_opcy = opts.move_speed/1000/sec * step; // Der Transparenzwert, der in jeder Schleife transformiert werden muss
            var speed_ = getRandomNum(new Number(opts.move_speed)-30,new Number(opts.move_speed) 30);
Var Curropcy; // Zeichnen Sie die Transparenz auf, wenn die Maus bewegt wird
//                     console.log(opts.move_speed '....' speed_)
                     /**Elementbewegungsschleife **/
              var s = setInterval(function(){
                         interVal(a,s_opcy,botm,n,space,s);
                  }, speed_)
                                                                      A.mouseover (function () {// Mausbewegungen
                    currOpcy = a.css('opacity');
                                                                                                                                                                                                                                                                                $(this).css({
                          zIndex: 401,
Deckkraft: 1
                     });
                });
                                                                                       a.mouseout(function(){ // Maus raus
$(this).css({
                        zIndex: zInx,
Deckkraft: currOpcy
                     });
                     s= setInterval(function(){
                              interVal(a,s_opcy,botm,n,space,s);
                         },speed_);
                });
            }
                setATagCss();
               setInterval(init,opts.init_speed);
});
}
})(jQuery)



HTML:

Code kopieren

Der Code lautet wie folgt:

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





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

    #tag{
        border:1px gestrichelt grau;
        Breite:250px;
        Höhe:250px;
        oben: 50px;
        links: 300px;
    }
    a{
        padding:0px 3px;
        Schriftgröße:12px;
        Leerraum: nowrap;
        display:none;
    }