Jquery plug in development of jquery accordion function sharing

  • 2020-03-30 02:21:12
  • OfStack

It can be used with images or containers, just like a regular jQuery plug-in call. The implementation principle is not difficult to understand, all in the code comments. Check out the code below, or a sample demonstration.


;(function($){
    
    $.fn.iAccordion=function(iSet){
        var self=this;
        iSet=$.extend({Type:'mouseover',Select:'img',Cur:0,InitInterval:100,Interval:500,Easing:''},iSet||{});
        /*
         * Type:  Mouse event type, mouseover,click,mouseleave Etc. 
         * Select:  Selector to get the collection of elements that need to be switched 
         * Cur:  Expands the index of the element by default 
         * InitInterval:  Initializes the time between animations for accordion effects 
         * Interval:  Mouse event animation interval 
         * Easing:  Animation, yes jQuery.easing Support, parameters can be referenced jQuery.easing@ http://gsgd.co.uk/sandbox/jquery/easing/
         */
        var item,boxW,selectW,animateW,sIndex,animateL;
        $(self).each(function(){
            //Initializes the container style
            $(this).css({'position':'relative','overflow':'hidden'});
            item=$(this).find(iSet.Select);
            //Initializes the toggle element style
            item.css({'position':'absolute','left':0,'top':0});
            boxW=$(this).outerWidth();
            selectW=item.outerWidth();
            animateW=(boxW-selectW)/(item.size()-1);
            //Initializes the array of elements and an index value for element data
            item.each(function(i){
                $(this).animate({'left':animateW*i+'px'},iSet.InitInterval,iSet.Easing);
                $(this).data('index',i);
            }).on(iSet.Type,function(e){//Bind mouse events
                //Gets the current element index value
                sIndex=$(this).data('index');
                    //Mouse event animation, by determining the size of the element index value and the current element index value of the animation to display the current element and animation
                    item.each(function(n){
                        n > sIndex ? animateL=selectW+animateW*(n-1) : animateL=animateW*n;
                        $(this).stop().animate({'left':animateL+'px'},iSet.Interval,iSet.Easing);
                    });
            }).eq(iSet.Cur).trigger(iSet.Type);
        });
    }
})(jQuery);

How?
1. Introduce the above plug-in code into the page;
2, $(selectmain). IAccordion ({... });
3. Please refer to the comments in the plug-in for related parameters and functions.
Small hint, if you need to define Easing, you need to import jQuery. Easing plug-in, Easing parameters namely jQuery. Easing method name, such as easeOutBounce, easeOutQuint, etc.


Related articles: