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.