Javascript-like QQ sliding menu effect code _ javascript skills

Javascript imitation QQ sliding menu effect code, very beautiful code, learning js friends can refer to the following code style. [Program source code]

The Code is as follows:

Var QQ = function (){
// Public Functions
Function T $ (id) {return document. getElementById (id );}
Function T $ (root, tag) {return (root | document). getElementsByTagName (tag );}
Function $ extend (des, src) {for (var p in src) {des [p] = src [p];} return des ;}
Function $ each (arr, callback, thisp ){
If (arr. forEach) {arr. forEach (callback, thisp );}
Else {for (var I = 0, len = arr. length; I <len; I ++) callback. call (thisp, arr [I], I, arr );}
}
Function currentStyle (elem, style ){
Return elem. currentStyle | document. defaultView. getComputedStyle (elem, null );
}
// Easing
Var Tween = {
Quart :{
EaseOut: function (t, B, c, d ){
Return-c * (t = t/D-1) * t-1) + B;
}
},
Back :{
EaseOut: function (t, B, c, d, s ){
If (s = undefined) s = 1.70158;
Return c * (t = t/D-1) * t * (s + 1) * t + s) + 1) + B;
}
},
Bounce :{
EaseOut: function (t, B, c, d ){
If (t/= d) <(1/2. 75 )){
Return c * (7.5625 * t) + B;
} Else if (t <(2/2. 75 )){
Return c * (7.5625 * (t-= (1.5/2.75) * t ++ 75) + B;
} Else if (t <(2.5/2.75 )){
Return c * (7.5625 * (t-= (2.25/2.75) * t +. 9375) + B;
} Else {
Return c * (7.5625 * (t-= (2.625/2.75) * t +. 984375) + B;
}
}
}
}

// Main class Constructor
Var scrollTrans = function (cid, sid, count, config ){
Var self = this;
If (! (Self instanceof scrollTrans )){
Return new scrollTrans (cid, sid, count, config );
}
Self. container = T $ (cid );
Self. scroller = T $ (sid );
If (! (Self. container | self. scroller )){
Return;
}
Self. config = $ extend (defaultConfig, config || {});
Self. index = 0;
Self. timer = null;
Self. count = count;
Self. step = self. scroller. offsetWidth/count;
};

// Default Configuration
Var defaultConfig = {
Trigger: 1, // trigger Method 1: click other: mouseover
Auto: true, // whether to automatically switch
Tween: Tween. Quart. easeOut, // default easing class
Time: 10, // sliding Delay
Duration: 50, // switch time
Pause: 3000, // pause time
Start: function () {}, // switch to start executing the function
End: function () {}// switch to the end of the execution function
};

ScrollTrans. prototype = {
Constructor: scrollTrans,
Transform: function (index ){
Var self = this;
Index = undefined & (index = self. index );
Index <0 & (index = self. count-1) | index> = self. count & (index = 0 );
Self. time = 0;
Self.tar get =-Math. abs (self. step) * (self. index = index );
Self. begin = parseInt (currentStyle (self. scroller) ['left']);
Self. change = self.tar get-self. begin;
Self. duration = self. config. duration;
Self. start ();
Self. run ();
},

Run: function (){
Var self = this;
ClearTimeout (self. timer );
If (self. change & self. time <self. duration ){
Self. moveTo (Math. round (self. config. tween (self. time ++, self. begin, self. change, self. duration )));
Self. timer = setTimeout (function () {self. run ()}, self. config. Time );
} Else {
Self.moveTo(self.tar get );
Self. config. auto & (self. timer = setTimeout (function () {self. next ()}, self. config. pause ));
}
},

MoveTo: function (I ){
This. scroller. style. left = I + 'px ';
},

Next: function (){
This. transform (++ this. index );
}
};

Return {
Scroll: function (cid, sid, count, config ){
Window. onload = function (){
Var frag = document. createDocumentFragment (),
Nums = [];
For (var I = 0; I <count; I ++ ){
Var li = document. createElement ('lil ');
(Nums [I] = frag. appendChild (document. createElement ('lil'). innerHTML = I + 1;
}
T $ ('page'). appendChild (frag );

// Call the main class
Var st = scrollTrans (cid, sid, count, config );
$ Each (nums, function (o, I ){
O [st. config. trigger = 1? 'Onclick': 'onmouseover'] = function () {o. className = 'on'; st. transform (I );}
O. onmouseout = function () {o. className = ''; st. transform ();}
});
St. start = function (){
$ Each (nums, function (o, I ){
O. className = st. index = I? 'On ':'';
});
};
St. transform ();
}
}
}
}();

QQ. scroll ('Container', 'scroller', 5, {trigger: 0 });

[Parameter description]

The Code is as follows:

Var defaultConfig = {
Trigger: 1, // trigger Method 1: click other: mouseover
Auto: true, // whether to automatically switch
Tween: Tween. Quart. easeOut, // default easing class
Time: 10, // sliding Delay
Duration: 50, // switch time
Pause: 3000, // pause time
Start: function () {}, // switch to start executing the function
End: function () {}// switch to the end of the execution function
};

[Usage]

The Code is as follows:

QQ. scroll ('Container'/* external container ID */, 'scroller'/* Sliding container ID */, 5/* switching image quantity */, {trigger: 0}/* default configuration */);

[Source code download]
Slider