La nouvelle version de jquery.guide.js est en ligne

Cet article présente principalement la nouvelle version du plug-in jQuery d'invite creuse du guide d'opération en ligne jquery.guide.js (recommandé). Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

1. S'il vous plaît jquery.guide.js

Lorsque le site Web est en ligne ou révisé, il créera souvent un guide d'opération pour indiquer aux utilisateurs où se trouvent certaines opérations importantes ou quelles choses amusantes sont cachées. quelque part. Des choses, etc., même si je les désactive toujours directement ou les saute rapidement, elles sont toujours très utiles pour certains utilisateurs.

Le meilleur effet interactif de ce type d'invite est d'utiliser un masque creux semi-transparent, de sorte que la mise au point visuelle soit claire en un coup d'œil, semblable à ceci :

J'ai écrit un article L'année dernière, intitulée "Tencent Weiyun Black Mask Boot Mask Better CSS Implementation Method" présente comment utiliser une seule étiquette pour obtenir des effets interactifs similaires. Parmi eux, la technique de base consiste à utiliser l'attribut de bordure CSS, qui est le masque noir translucide environnant. C'est en fait une frontière semi-transparente.

Plus tard, j'ai trouvé une meilleure façon de l'implémenter, qui consiste à utiliser l'attribut outline CSS. L'attribut outline est le contour de l'élément. Il n'augmentera la taille d'aucun élément ni ne détruira la mise en page d'origine. nous n'avons donc besoin que de définir une valeur de largeur de contour très, très grande, et nos éléments positionnés seront toujours naturellement creux. Il n'est pas nécessaire de calculer la taille des zones noires translucides au-dessus, en dessous, à gauche et à droite.

.guide {
  outline: 9999px solid rgba(0,0,0,.75);
}

Récemment, il y a eu un projet de révision avec des besoins similaires. Sur la base de ce principe, j'ai créé un plug-in jQuery appelé jquery.guide.js, spécialement utilisé pour réaliser un masque noir translucide. effet de guidage rapide.

Adresse de démonstration de l'instance : Cliquez ici pour l'adresse de démonstration

2 Avantages du plug-in jquery.guide.js

Les avantages de jquery.guide.js. Le plug-in est le suivant :

1. Facile à utiliser, importez simplement JS directement sans introduire de ressources CSS ;
2. Prend en charge le défilement du navigateur et le repositionnement du zoom ; telles que les touches haut et bas et les touches gauche et droite pour les étapes précédentes et suivantes, la touche ESC pour quitter, etc.
4. Prend en charge le guidage des éléments présentés de manière asynchrone sur la page
5. , c'est-à-dire un traitement intégré qui ne demandera qu'une seule fois, basé sur localStorage Faites le premier jugement
6 Compatible avec le navigateur IE8

.guide {
  box-shadow: 0 0 0 9999px rgba(0,0,0,.75);
  border-radius: 50%;
}

$.guide(options);

var defaults = {
  selector: '', 
  content: '', 
  align: 'center',
  offset: {
    x: 0,
    y: 0
  }
};

.

$.guide([{
  selector: '#target'
}]);

•content représente le contenu supplémentaire affiché dans la zone creuse, qui peut être une chaîne HTML ou un objet wrapper jQuery.
•align indique l'alignement du contenu affiché, est-il aligné à gauche, au centre ou à droite ? Les valeurs de mots-clés facultatives incluent : left , center , right , où center est la valeur par défaut.
•offset représente la distance horizontale et verticale du décalage. x est la position du décalage horizontal. La règle de calcul est liée à la valeur du paramètre d'alignement. y représente la distance de décalage vertical. Le contenu de l'invite de contenu n'est pas aligné en haut par défaut. , mais par rapport au creux Alignez l'élément cible exposé 5 pixels au-dessus de son bord inférieur.

<script src="./jquery.min.js"></script>
<script src="./jquery.guide.js"></script>
<script>
$.guide([{
  selector: '.logo',
  content: '<img src="guide-1.png">',
  align: 'left'
}, {
  selector: '.ad img',
  content: '<img src="guide-2.png">'
}, {
  selector: '#back',
  content: '<img src="guide-3.png">',
  align: 'left'
}, {
  selector: '.demo img',
  content: '<img src="guide-4.png">'
}]);
</script>

Ce n'est pas une bonne chose, donc je ne le mettrai pas sur github. Si vous avez la chance de l'utiliser et rencontrez des problèmes, vous êtes invités à nous faire part de vos commentaires sous forme de commentaires.

Recommandations associées :

le plug-in jQuery ImgAreaSelect implémente les fonctions de prévisualisation et de recadrage du téléchargement d'avatar

plug-in jQuery imgAreaSelect exemple d'explication

Explication détaillée du plug-in jquery jquery.viewport.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!