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.
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.
Khan: The gif image may be a bit big and will move after a while. Be patient
(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:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
