Maison interface Web js tutoriel Effet d'affichage latéral coulissant du panneau implémenté par jQuery slidereveal_jquery

Effet d'affichage latéral coulissant du panneau implémenté par jQuery slidereveal_jquery

May 16, 2016 pm 04:09 PM
jquery

Nous utilisons un plug-in jQuery : slidereveal.js, qui peut être utilisé pour contrôler les effets de glissement et de masquage gauche et droit du panneau. Adresse du projet : https://github.com/nnattawat/. slideRévéler.

Comment utiliser

Chargez d'abord le fichier de la bibliothèque jquery et le plug-in slidereveal.js dans la page.

Copier le code Le code est le suivant :

<script src="jquery.js"></script> <script src="jquery.slidereveal.min.js"></script>

Placez ensuite un élément de panneau tel que div#slider dans le corps, avec un contenu personnalisé, et placez un élément qui déclenche l'appel du panneau, tel qu'un bouton ou un élément.

<div id="slider" class="slider"> Helloweba vous souhaite la bienvenue !
</div> <button id="trigger" class="trigger">Développer à gauche</button>


Enfin, appelez directement le plug-in slidereveal.js, le code est le suivant :

Copier le code

Le code est le suivant : $('#slider').slideReveal({ déclencheur : $("#trigger") });

Paramètres des options

Par défaut, le panneau glisse depuis la gauche et « pousse » le contenu de la page principale vers la droite, et le panneau peut être fermé à l'aide de la touche « ESC » du clavier.

Propriétés Description Valeur par défaut
largeur Type entier, largeur du panneau. 250
appuyer Booléen, défini sur true, le panneau « poussera » le contenu principal de la page d'un côté une fois développé. Lorsqu'il est défini sur false, le panneau s'étendra au-dessus du contenu principal de la page. vrai
poste Chaîne, définissez la direction d'expansion et de glissement du panneau, qui peut être réglée sur "gauche" ou "droite" "gauche"
vitesse Entier, vitesse d'expansion du panneau, unité : millisecondes. 300
déclencheur Sélecteur DOM jQuery, définissez les éléments de page qui peuvent déclencher l'affichage et le masquage du panneau, tels que $("#element") Indéfini
évasion automatique Type booléen, définit s'il faut autoriser l'utilisation de la touche ESC du clavier pour masquer le panneau développé. vrai
haut Entier, définit la distance entre le panneau et la partie supérieure de la fenêtre. 0
afficher Fonction de rappel, appelée lorsque le panneau est développé. -
montré Fonction de rappel, appelée lorsque le panneau est développé. -
cacher Fonction de rappel, appelée lorsque le panneau est masqué. -
afficher Fonction de rappel, appelée lorsque le panneau est masqué. -

Le plug-in slidereveal.js fournit également des appels de méthodes d'expansion et de masquage. Le code est le suivant :

Copier le code Le code est le suivant :

//Agrandir le panneau
$('#slider').slideReveal("show");
//Masquer le panneau
$('#slider').slideReveal("masquer");

Ce qui précède est tout le contenu partagé avec vous dans cet article. Les amis dans le besoin peuvent venir s'y référer. J'espère qu'il sera utile à tout le monde de se familiariser avec jQuery.

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide Feb 27, 2024 pm 06:45 PM

Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide

Comment utiliser la méthode de requête PUT dans jQuery ? Comment utiliser la méthode de requête PUT dans jQuery ? Feb 28, 2024 pm 03:12 PM

Comment utiliser la méthode de requête PUT dans jQuery ?

Comment supprimer l'attribut height d'un élément avec jQuery ? Comment supprimer l'attribut height d'un élément avec jQuery ? Feb 28, 2024 am 08:39 AM

Comment supprimer l'attribut height d'un élément avec jQuery ?

Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page Feb 28, 2024 pm 09:06 PM

Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page

Analyse approfondie : les avantages et les inconvénients de jQuery Analyse approfondie : les avantages et les inconvénients de jQuery Feb 27, 2024 pm 05:18 PM

Analyse approfondie : les avantages et les inconvénients de jQuery

Utilisez jQuery pour modifier le contenu textuel de toutes les balises Utilisez jQuery pour modifier le contenu textuel de toutes les balises Feb 28, 2024 pm 05:42 PM

Utilisez jQuery pour modifier le contenu textuel de toutes les balises

Comprendre le rôle et les scénarios d'application de eq dans jQuery Comprendre le rôle et les scénarios d'application de eq dans jQuery Feb 28, 2024 pm 01:15 PM

Comprendre le rôle et les scénarios d'application de eq dans jQuery

Comment savoir si un élément jQuery possède un attribut spécifique ? Comment savoir si un élément jQuery possède un attribut spécifique ? Feb 29, 2024 am 09:03 AM

Comment savoir si un élément jQuery possède un attribut spécifique ?

See all articles