Récemment, je m'intéresse particulièrement à l'encapsulation de plug-in de js Avec la technologie actuelle, il est encore difficile d'encapsuler complètement js, j'ai donc encapsulé un petit plug-in basé sur jQuery, et il a été développé sur cette base. le niveau de l'objet. Ne pas ajouter de méthode globale. Il n'y a presque pas de syntaxe avancée. Il existe une méthode return: foreach() pour renvoyer l'instance d'objet elle-même, et une fonction extend() pour étendre les propriétés de l'objet paramètre. Ceci sert également à faciliter le chaînage de l'objet après ajustement. ma méthode. tapez l’opération.
À l'heure actuelle, le plug-in peut fonctionner normalement, mais si vous changez d'onglet du navigateur et que la page du plug-in ne s'affiche pas, puis revenez après un certain temps, il y aura un décalage, je ne sais pas. quelle est la situation pour le moment. S'il vous plaît, donnez-moi quelques conseils si vous en savez plus, il y a beaucoup de domaines qui doivent être optimisés. Si vous avez de bonnes idées, n'hésitez pas à les apporter afin que je puisse apporter des corrections. en temps opportun.
Khan : L'image gif est peut-être un peu grande et bougera au bout d'un moment. Soyez patient
(fonction($){
$.fn.activiTag = fonction (opts) {
opts = $.extend({
move_step:2, // taille du pas de mouvement de l'élément--px
move_speed:40, // Vitesse de déplacement de l'élément--ms
init_speed:1000,//Vitesse de création d'éléments--ms
min_opacity:0,
max_grain : 10, // Taille maximale des grains
// un tableau de balises
a_List : ["
Veuillez ajouter des éléments","
Explication détaillée de Spring Jpa","
javamailmail"], // un tableau de chaînes de balises
// Tableau de couleurs d'arrière-plan
color_List : ['#CD2626','#8b4513','#696969','#ff8c00','#6495ED'] ;
},opts||{});
var aTag = $(this); // Objet conteneur actuel
var T_width = aTag.width(), T_height = aTag.height(); // Hauteur du conteneur, largeur
renvoie this.each(function(){
Fonction settatagcss() {// Définit le CSS correspondant
aTag.css({position:'relative',overflow:'hidden'});
}
function getRandomNum(Min, Max){ // Obtenez des nombres aléatoires dans deux intervalles
Min = nouveau Nombre(Min);Max = nouveau Nombre(Max);
var Range = Max - Min 1 ;
var Rand = Math.random();
return Min Math.floor(Rand * Range);
}
Fonction getrandomxy (num) {// Renvoie aléatoirement un paramètre positif/négatif
num = nouveau numéro (num);
Si(Math.random()<=0.5)
num = -num;
return num
}
/**
* Créez aléatoirement une balise d'une largeur d'un tiers de la largeur du conteneur, puis basée sur elle-même - un cinquième de la largeur
* La hauteur est égale à un tiers de sa propre largeur, puis à - un tiers
*/
fonction createATag() {
var i = getRandomNum(0,opts.a_List.length-1);
var a = $(opts.a_List[i]); aTag.append(a);
renvoyer un ;
}
/**Définir un style CSS de balise **/
fonction setCss(a) {
var w = Math.ceil(T_width/3) getRandomXY(T_width/60);
var h = Math.ceil(w/3) getRandomXY(w/36); // Hauteur de la ligne
var zIndex = Math.ceil(Math.random()*400);
var rdmOpcy = getRandomNum(new Number(opts.min_opacity),0);
// Hauteur du trait, nombre de calques, transparence
a.css({
opacité:rdmOpcy,
zIndex : zIndex,
lineHeight:h 'px',
position : 'absolue',
textDécoration : 'aucun',
textAlign:'center',
borderRadius : '3px',
couleur : '#FFFFFF',
whiteSpace : 'nowrap',
});
renvoyer un ;
}
/**Calculer la position initiale de l'étiquette par rapport au conteneur (coordonnées X_Y) **/
fonction setXY(a) {
var x = getRandomNum(0,(T_width-a.width()));
var y = getRandomNum(0,T_height/10);
a.css({gauche:x 'px', bas:y 'px'});
renvoyer un ;
}
/**Définir une couleur d'arrière-plan aléatoire **/
fonction setColor(a) {
var i = Math.ceil(Math.random()*opts.color_List.length -1);
a.css({backgroundColor:opts.color_List[i]})
}
/**Entrée du constructeur **/
fonction construct() {
var a = createATag();
setCss(a);
setColor(a); // couleur
setXY(a);
renvoyer un ;
}
/**Fonction minuterie d'animation **/
function interVal(a,s_opcy,botm,n,space,s) {
var opcy = a.css('opacity'); // Transparence
var botm_ = a.css('bottom').replace('px',''); // Distance inférieure en temps réel
var opcy_ = parseFloat(new Number(a.css('opacity'))) s_opcy; // Transparence
var _opcy_ = parseFloat(new Number(a.css('opacity'))) - s_opcy; // --Transparency
var fall = botm_ - botm; // Distance déplacée
botm_ = new Number(botm_) new Number(opts.move_step);
a.css({
affichage : 'bloquer',
en bas : botm_,
});
Si (chute < n)
{A.CSS ({OPACITY : OPCY_})}
else if(2*n < fall)
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
Si (botm_ >= espace)
{
a.remove();
}
}
fonction init() {
If(aTag.children('a').length >= new Number(opts.max_grain))
Retournez
var a = construct();
var opcy = a.css('opacity'); // Transparence
var zInx = a.css('zIndex');
var botm = a.css('bottom').replace('px',''); // Distance initiale jusqu'au bas
var space = T_height - a.height() - a.css('bottom').replace('px',''); // Distance à parcourir
var n = espace/3 ;
var step = 1-opcy ;
var sec = n/opts.move_step*opts.move_speed/1000; // Distance/longueur d'un pas unique * longueur d'un pas unique secondes = nombre de secondes requises
var s_opcy = opts.move_speed/1000/sec * step ; // La valeur de transparence qui doit être transformée dans chaque boucle
var speed_ = getRandomNum(new Number(opts.move_speed)-30,new Number(opts.move_speed) 30);
Var Curropcy; // Enregistre la transparence lorsque la souris est déplacée
// console.log(opts.move_speed '....' speed_)
/**Boucle de mouvement des éléments **/
var s = setInterval(function(){
interVal(a,s_opcy,botm,n,space,s);
}, speed_)
A.Mouseover (fonction () {// mouvements de la souris
currOpcy = a.css('opacity');
$(this).css({
zIndex : 401,
Opacité : 1
});
});
a.mouseout(function(){ // Souris sortie
$(this).css({
zIndex : zInx,
Opacité : currOpcy
});
s= setInterval(function(){
interVal(a,s_opcy,botm,n,space,s);
},speed_);
});
}
setATagCss();
setInterval(init,opts.init_speed);
});
>
})(jQuery)
HTML :
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Quelles sont les méthodes pour changer instantanément l'IP dans les vps dynamiques ?
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
