développement de plug-in jquery pour réaliser la fonction accordéon jquery Sharing_jquery

peut être utilisé pour des images ou des conteneurs, et l'utilisation est la même que celle de la méthode d'appel du plug-in jQuery standard. Les principes de mise en œuvre ne sont pas difficiles à comprendre et ils se trouvent tous dans les commentaires du code. Si vous souhaitez l'étudier, vous pouvez consulter le code ci-dessous ou l'exemple de démonstration.

Copier le code Le code est le suivant :

;(function($){
/*
* Plug-in de commutation d'accordéon simple basé sur jQuery
*/
$.fn.iAccordion=function(iSet){
var self=this;
iSet=$. extend({Type : 'mouseover',Select:'img',Cur:0,InitInterval:100,Interval:500,Easing:''},iSet||{});
                                                                                                                                  survoler la souris, cliquer, quitter la souris, etc. .
* Select : Sélecteur, utilisé pour obtenir l'ensemble des éléments qui doivent être commutés
* Cur : L'index de l'élément développé par défaut
* InitInterval : Initialiser l'intervalle d'animation de l'effet accordéon
* Intervalle : intervalle de temps d'animation d'événement de souris
* Easing : effet d'animation, qui nécessite la prise en charge de jQuery.easing Pour les paramètres, veuillez vous référer à jQuery.easing@ http://gsgd.co.uk/sandbox/jquery/easing/<.> */
var item,boxW,selectW,animateW,sIndex,animateL;
$(self).each(function(){
position':'relative','overflow':'hidden '});
                                                                                                                                                                    {'position':'absolute','left':0,'top':0});
               boxW=$(this).outerWidth( >           ); animerW=(boîteW- selectW)/(item.size()-1); (this)             .on(iSet.Type ,function(e){//Bind mouse event
                                                                                                                                      Animation d'événement de souris, en jugeant la relation de taille entre la valeur de l'index de l'élément et la valeur actuelle de l'index de l'élément, animer l'élément actuel et l'organiser de manière animée
 n-1) : animateL=animateW*n;
                                                                           ;
        }).eq(iSet.Cur ).trigger(iSet.Type);
       });

Comment appeler ?
1. Introduisez le code du plug-in ci-dessus dans la page ;
2. $(selectmain).iAccordion({…})
3. le plug-in.
Un petit conseil, si vous devez définir Easing, vous devez importer le plug-in jQuery.easing. Les paramètres de Easing sont les noms de méthodes de jQuery.easing, tels que easyOutBounce, easyOutQuint, etc.