| |
Preface:
Recent particularly interested js plugin package, Wu Nai current technology want to do js complete package, there are still some difficulties, it is based on jQuery encapsulates a small plug-in, and is based on object-level development, not add global method. Advanced grammar little, there is a return: foreach () method returns the object instance itself, there is a extend () function is used to extend the parameters of the object's properties, which is to finish the object in this method after I tune convenience chain operation.
Plug-in name: dynamic cloud tag
Plug-in features:
Dynamically generate a label within the specified block-level elements
A label height, width, location, number of layers, the background color random controlled
Fade display a label disappear and fade, you can change the transparency of initialization
A label created by the speed and the moving speed controlled (timer)
a label moving step can be controlled (moving distance of each cycle)
Hover stop animation and maximum transparency, maximum number of layers, the mouse leaves, restore the previous state
Encounter problems:
Widget is currently running, but if you switch browser tabs, do not put the plug in page display, and then switch back after a while, there will be the phenomenon of Caton, this is not yet know what the situation, learn to give instructions, and there was many need to optimize the place, hope to have a good idea put forward, I'm so timely corrections.
JS code fragment:
(Function ($) {
$ .fn.activiTag = Function (opts) {
opts = $ .extend ({
move_step: 2, // element moving step --px
move_speed: 40, // element moving speed --ms
init_speed: 1000, // element creates speed --ms
min_opacity: 0, // element minimum transparency --0-1 decimal
max_grain: 10, // Maximum particle size
// A tag array
a_List: [ "< a href='#'> add elements Oh < /a>", "< a href='#'> Spring Jpa Detailed < /a>", "< a href='#'> javamail mailbox < /a> "], // a string array tag
// Background color array
color_List: [ '# CD2626', '# 8b4513', '# 696969', '# ff8c00', '# 6495ED'] // tag array of colors
}, Opts || {});
var aTag = $ (this); // current container object
var T_width = aTag.width (), T_height = aTag.height (); // container height, width
return this.each (function () {
function setATagCss () {// set container corresponding css
aTag.css ({position: 'relative', overflow: 'hidden'});
}
function getRandomNum (Min, Max) {// get within range of two random numbers
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) {// returns a random positive / negative parameters
num = new Number (num);
if (Math.random () < = 0.5)
num = -num;
return num;
}
/ **
* Create a random tag, a width of one-third of the width of the container, and then themselves on the basis of + - one fifth of the width
Third of the width * height itself, then + - one third
* /
function createATag () {
var i = getRandomNum (0, opts.a_List.length-1);
var a = $ (opts.a_List [i]); // Each label element
aTag.append (a);
return a;
}
/ ** ** Set a style tag css /
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); // layers
var rdmOpcy = getRandomNum (new Number (opts.min_opacity), 0);
// Line height, 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;
}
/ ** Calculations tab initialization position 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 the 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 inlet /
function construct () {
var a = createATag ();
setCss (a); // css
setColor (a); // color
setXY (a); // coordinate position
return a;
}
/ Timer function ** ** Animation /
function interVal (a, s_opcy, botm, n, space, s) {
var opcy = a.css ( 'opacity'); // Transparency
var botm_ = a.css ( 'bottom') replace ( 'px', '');. // real time from the bottom
// ++ Transparency; var opcy_ = parseFloat (new Number (a.css ( 'opacity'))) + s_opcy
var _opcy_ = parseFloat (new Number (a.css ( 'opacity'))) - s_opcy; // - Transparency
var fall = botm_ - botm; // has moved a 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 zInx = a.css ( 'zIndex'); // layers
var botm = a.css ( 'bottom') replace ( 'px', '');. // in the end portion of the initial distance
var space = T_height - a.height () - a.css ( 'bottom') replace ( 'px', ''); // distance to travel.
var n = space / 3; // distance transform transparency
var step = 1-opcy; // value to change transparency
var sec = n / opts.move_step * opts.move_speed / 1000; // Distance / single step * Single-step Seconds = number of seconds required
var s_opcy = opts.move_speed / 1000 / sec * step; // transparency value for each cycle requires transformation
var speed_ = getRandomNum (new Number (opts.move_speed) -30, new Number (opts.move_speed) +30);
var currOpcy; // when the mouse into the recording transparency
// Console.log (opts.move_speed + '....' + speed_)
/ ** ** Element moving cycle /
var s = setInterval (function () {
interVal (a, s_opcy, botm, n, space, s);
}, Speed_)
a.mouseover (function () {// the mouse into
currOpcy = a.css ( 'opacity');
clearInterval (s);
$ (This) .css ({
zIndex: 401,
opacity: 1
});
});
a.mouseout (function () {// the 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:
< ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< Html xmlns = "http://www.w3.org/1999/xhtml">
< Head>
< Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
< Title> tag cloud dynamically generated widget < / title>
< Script src = "jquery.min.js" type = "text / javascript" charset = "utf-8"> < / script>
< Script src = "jquery-tag.js" /> "type =" text / javascript "charset =" utf-8 "> < / script>
< Script>
$ (Function () {
$ ( '# Tag') activiTag ({}).;
});
< / Script>
< Style>
#tag {
border: 1px dashed gray;
width: 250px;
height: 250px;
top: 50px;
left: 300px;
}
a {
padding: 0px 3px;
font-size: 12px;
white-space: nowrap;
display: none;
}
< / Style>
< / Head>
< Body>
< Div id = 'tag'> < / div>
< / Body>
< / Html> |
|
|
|