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.
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.
Khan: Das GIF-Bild ist möglicherweise etwas groß und bewegt sich nach einer Weile. Seien Sie geduldig
(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:
