jQuery dynamic cloud tag plug-in_jquery

Foreword:

Recently, I am particularly interested in the plug-in encapsulation of js. With the current technology, it is still difficult to completely encapsulate js, so I encapsulated a small plug-in based on jQuery, and it was developed based on the object level. Not adding a global method. There is almost no advanced syntax. There is a return: foreach() method to return the object instance itself, and an extend() function to extend the properties of the parameter object. This is also to facilitate the chaining of the object after adjusting my method. type operation.

Plug-in package download address: Click here to download

Plug-in name: Dynamic Cloud Tag

Plug-in features:

Dynamicly generate a tag within the specified block-level element
The height, width, position, number of layers, and background color of the a label are randomly controllable
The a label fades in and out, and the initial transparency can be changed
The speed of a label creation and movement speed are controllable (timer)
The step size of a label movement can be controlled (distance moved in each cycle)
When the mouse is hovering, the animation will be stopped with maximum transparency and the highest number of layers. When the mouse leaves, the previous state will be restored
Encountering a problem:

At present, the plug-in can run normally, but if you switch the browser tab and the plug-in page is not displayed, and then switch back after a while, there will be a lag. I don’t know what the situation is yet. Please give me some advice if you know more about it. , there are a lot of areas that need to be optimized. If you have any good ideas, please bring them up so that I can make corrections in a timely manner.

Animation effect:

Khan: The gif image may be a bit big and will move after a while. Be patient

JS code snippet:

Copy code The code is as follows:

(function($){
$.fn.activiTag = function(opts) {
         opts = $.extend({
             move_step:2, // element movement step size--px
             move_speed:40, // Element movement speed--ms
               init_speed:1000,//Element creation speed--ms
                                                                                                                                                          min_opacity:0,                max_grain: 10, // Maximum grain size
// A label array > a_List: ["Please add elements","Spring Jpa detailed explanation","javamailmail"], // a tag string array
                        // Background color array
            color_List: ['#CD2626','#8b4513','#696969','#ff8c00','#6495ED']                                                                                                                                      ;            },opts||{});
                             
        var aTag = $(this); // Current container object
        var T_width = aTag.width(), T_height = aTag.height(); // Container height, width
                             
         return this.each(function(){
                                                                      Function settatagcss () {// Set the corresponding CSS
               aTag.css({position:'relative',overflow:'hidden'});
            }
                                                                                       function getRandomNum(Min, Max){ // Get random numbers within two intervals
Min = new Number(Min);Max = new Number(Max);
              var Range = Max - Min 1;
              var Rand = Math.random();
                    return Min Math.floor(Rand * Range);
            }
                                                                      Function getrandomxy (num) {// Randomly return a positive/negative parameter
                  num = new Number(num);                              If(Math.random()<=0.5)
                num = -num;
                        return num;
            }
                                                                                     /**
* Randomly create a tag with a width of one-third of the width of the container, and then based on itself - one-fifth of the width
                 * Height is one-third of its own width, then - one-third
                               */
              function createATag() {
              var i = getRandomNum(0,opts.a_List.length-1);
              var a = $(opts.a_List[i]);               aTag.append(a);
                      return a;
            }
                                                                                     /**Set a tag css style **/
              function setCss(a) {
              var w = Math.ceil(T_width/3) getRandomXY(T_width/60);
                     var h = Math.ceil(w/3) getRandomXY(w/36); // Row height
                    var zIndex = Math.ceil(Math.random()*400);               var rdmOpcy = getRandomNum(new Number(opts.min_opacity),0);
// Line height, number of layers, transparency
a.css({
                  opacity:rdmOpcy,
                     zIndex: zIndex,
                       lineHeight:h 'px',
position: 'absolute',
                       textDecoration:'none',
                        textAlign:'center',
                       borderRadius: '3px',
                     color:'#FFFFFF',
                      whiteSpace: 'nowrap',
                });
                      return a;
            }
                                                                                     /**Calculate the initial position of the label relative to the container (X_Y coordinates) **/
              function 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;
            }
                                                                                     /**Set random background color **/
              function setColor(a) {
            var i = Math.ceil(Math.random()*opts.color_List.length -1);
a.css({backgroundColor:opts.color_List[i]})
            }
                                                                                     /**Constructor entry **/
             function construct() {
            var a = createATag();
                      setCss(a);                    setColor(a); // color
                     setXY(a);                       return a;
            }
                                                                                     /**Animation timer function **/
              function interVal(a,s_opcy,botm,n,space,s) {
              var opcy = a.css('opacity'); // Transparency
                  var botm_ = a.css('bottom').replace('px',''); // Real-time bottom distance
              var opcy_ = parseFloat(new Number(a.css('opacity'))) s_opcy; // Transparency
                   var _opcy_ = parseFloat(new Number(a.css('opacity'))) - s_opcy; // --Transparency
                     var fall = botm_ - botm; // Moved distance
                         botm_ = new Number(botm_) new Number(opts.move_step);
a.css({
                      display: 'block',
                    bottom: botm_,
                });
                                                                        If(fall < n)
{A.CSS ({OPACITY: OPCY_})}
                         else if(2*n < fall)
                                                                                                                                   ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,                                                                           If (botm_ >= space)
                                                {
                                                                                                                                                                                                                                                                                                                   a.remove();
                }
            }
                                                                                    function init() {
If(aTag.children('a').length >= new Number(opts.max_grain))
Return;
            var a = construct();
              var opcy = a.css('opacity'); // Transparency
              var zInx = a.css('zIndex');               var botm = a.css('bottom').replace('px',''); // Initial distance to bottom
                 var space = T_height - a.height() - a.css('bottom').replace('px',''); // Distance to move
                                                                                        var n = space/3;               var step = 1-opcy;                     var sec = n/opts.move_step*opts.move_speed/1000; // Distance/single step length * single step length seconds = number of seconds required
                   var s_opcy = opts.move_speed/1000/sec * step; // The transparency value that needs to be transformed in each loop
            var speed_ = getRandomNum(new Number(opts.move_speed)-30,new Number(opts.move_speed) 30);
Var Curropcy; // Record the transparency when the mouse is moved
//                     console.log(opts.move_speed '....' speed_)
                     /**Element movement loop **/
              var s = setInterval(function(){
                          interVal(a,s_opcy,botm,n,space,s);
                  }, speed_)
                                                                        A.Mouseover (function () {// mouse moves
                currOpcy = a.css('opacity');
                                                                                                                                                                                                                                                                                                $(this).css({
                          zIndex: 401,
Opacity: 1
                     });
                });
                                                                                         a.mouseout(function(){ // Mouse out
$(this).css({
                        zIndex: zInx,
Opacity: currOpcy
                     });
                     s= setInterval(function(){
                               interVal(a,s_opcy,botm,n,space,s);
                          },speed_);
                });
            }
                setATagCss();
               setInterval(init,opts.init_speed);
        });
}
})(jQuery)



HTML:

Copy code

The code is as follows:

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>