Can be used for pictures or containers, using the same way as a regular jquery plug-in. The principle of implementation is not difficult to understand, both in code comments. Want to study can look at the following code, or sample demo.
Copy Code code as follows:
;(function ($) {
/*
* Simple accordion Switching plugin based on jquery
*/
$.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 set of elements that need to be toggled
* Cur: Index of the default unwind element
* Initinterval: Initialize the animation interval time of accordion effect
* Interval: Mouse event Animation time interval
* Easing: animation effect, need jquery.easing support, parameters can refer to jquery.easing@ http://gsgd.co.uk/sandbox/jquery/easing/
*/
var Item,boxw,selectw,animatew,sindex,animatel;
$ (self). each (function () {
Initialize container style
$ (this). css ({' position ': ' relative ', ' overflow ': ' Hidden '});
item=$ (This). Find (Iset.select);
Initialize Toggle element Style
Item.css ({' position ': ' absolute ', ' left ': 0, ' top ': 0});
boxw=$ (This). Outerwidth ();
Selectw=item.outerwidth ();
animatew= (BOXW-SELECTW)/(Item.size ()-1);
Initializes an element to arrange and an index value for the 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
Get the current element index value
sindex=$ (this). Data (' index ');
Mouse event animation to animate the current element and animate it by determining the size relationship between the element index value and the current element index value
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 do I call it?
1, in the page to introduce the above plug-in code;
2, $ (selectmain). Iaccordion ({...});
3, related parameters and functions, please refer to the note in the plugin.
Small hint, if need to define easing, need to import jquery.easing plug-in, easing parameter namely Jquery.easing method name, such as Easeoutbounce, Easeoutquint and so on.
