JQuery dynamic cloud tag plug-in _ jquery

Here we recommend a jquery dynamic cloud tag plug-in, which is very dazzling. a tag is dynamically generated within a specified block-level element, the height, width, position, number of layers, and background color of tag a can be controlled at random. label a gradually fades in and out to change the initialization transparency. Hover the mouse over the animation and the animation has the highest transparency, the number of layers is the highest. Move the mouse away to restore the previous state:

Recently, I was particularly interested in js plug-in encapsulation. It is still difficult for the current technology to fully encapsulate js. I encapsulated a small plug-in based on jQuery, it is also developed based on objects, rather than adding a global method. There is almost no advanced syntax. There is a return: foreach () method to return the object instance itself. There is also an extend () function to extend the attributes of the parameter object, this is also to facilitate the chained operation of objects after I call this method.

Plug-in packaging: Click to download

Plug-in name: Dynamic cloud tag

Plug-in features:

Dynamically generate a tag within a specified block-level element
The height, width, position, number of layers, and background color of the tag are random and controllable.
The a tag is displayed and disappears gradually, which can change the transparency of initialization.
The speed and movement speed of tag a can be controlled (timer)
The step size of tag a movement can be controlled (the distance of each cycle)
Hover the mouse to stop the animation with the highest transparency, the highest number of layers, move the mouse away, restore the previous state
Problems:

Currently, the plug-in can run normally. However, if you switch the browser tag, the plug-in page will not be displayed, and the plug-in page will be switched back later, there will be a choppy phenomenon, which is unknown now, please give me some advice. There are also many areas to be optimized. If you have any good ideas, please make corrections in time.

Animation effect:

Khan: The GIF image may be a little big. It will take a while. Patience

JS code snippet:

The Code is as follows:

(Function ($ ){
$. Fn. activiTag = function (opts ){
Opts = $. extend ({
Move_step: 2, // The moving step of the element -- px
Move_speed: 40, // element movement speed-ms
Init_speed: 1000, // element creation speed-ms
Min_opacity: 0, // minimum transparency of the element-0-1 decimal
Max_grain: 10, // maximum Granularity
// A tag Array
A_List: ["add elements", "Spring Jpa details", "javamail mail"], // a tag String Array
// Array of background colors
Color_List: ['# cd2626',' #8b4513 ',' #696969 ',' # ff8c00 ',' # 6495ED '] // tag color array
}, Opts | {});

Var aTag = $ (this); // current container object
Var T_width = aTag. width (), T_height = aTag. height (); // container height and width

Return this. each (function (){

Function setATagCss () {// set the css of the container
ATag.css ({position: 'relative ', overflow: 'den den '});
}

Function getRandomNum (Min, Max) {// obtain a random number 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) {// a positive/negative parameter is randomly returned.
Num = new Number (num );
If (Math. random () <= 0.5)
Num =-num;
Return num;
}

/**
* Create a tag randomly. The width is 1/3 of the container width, and then the container width is +-1/5 Based on the container width.
* The height is 1/3 in width, and then +-1/3
*/
Function createATag (){
Var I = getRandomNum (0, opts. a_List.length-1 );
Var a = $ (opts. a_List [I]); // each Tag Element
ATag. append ();
Return;
}

/** Set the css style of the tag **/
Function setCss (){
Var w = Math. ceil (T_width/3) + getRandomXY (T_width/60 );
Var h = Math. ceil (w/3) + getRandomXY (w/36); // The Row Height
Var zIndex = Math. ceil (Math. random () * 400); // number of layers
Var rdmOpcy = getRandomNum (new Number (opts. min_opacity), 0 );
// Row Height, layers, and transparency
A.css ({
Opacity: rdmOpcy,
ZIndex: zIndex,
LineHeight: h + 'px ',
Position: 'absolute ',
TextDecoration: 'none ',
TextAlign: 'center ',
BorderRadius: '3px ',
Color: '# ffff ',
WhiteSpace: 'nowrap ',
});
Return;
}

/** Calculate the tag's initialization position (X_Y coordinate) relative to the container )**/
Function setXY (){
Var x = getRandomNum (0, (T_width-a.width ()));
Var y = getRandomNum (0, T_height/10 );
A.css ({left: x + 'px', bottom: y + 'px '});
Return;
}

/** Set the random background color **/
Function setColor (){
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); // css
SetColor (a); // color
SetXY (a); // Coordinate Position
Return;
}

/** 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; // The moving 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)
{A.css ({opacity: _ opcy _})}

If (botm _> = space)
{
ClearInterval (s );
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 zIndex = a.css ('zindex'); // number of layers
Var botm = a.css ('bottom '). replace ('px', ''); // The initial distance to the bottom.
Var space = T_height-a. height ()-a.css ('bottom '). replace ('px', ''); // The distance to be moved.

Var n = space/3; // change the transparency distance
Var step = 1-opcy; // The transparency value to be changed
Var sec = n/opts. move_step * opts. move_speed/1000; // distance/single step * single step number of seconds = required number of seconds
Var s_opcy = opts. move_speed/1000/sec * step; // The transparency value to be changed for 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 moves in
// 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 () {// move the mouse in
CurrOpcy = a.css ('opacity ');
ClearInterval (s );
Certificate (this).css ({
ZIndex: 401,
Opacity: 1
});
});

A. mouseout (function () {// move the mouse out
Certificate (this).css ({
ZIndex: zindexes,
Opacity: currOpcy
});
S = setInterval (function (){
InterVal (a, s_opcy, botm, n, space, s );
}, Speed _);
});
}
SetATagCss ();
SetInterval (init, opts. init_speed );
});
}
}) (JQuery)

HTML:

The Code is as follows:

Cloud dynamic tag generation plug-in