OO-based additional animation plug-ins can achieve bounce, fade-away, and other animation effects sharing _ javascript skills

OO-based additional animation plug-ins can be used to share bounce, fade, and other animation effects. For more information, see, I have just mentioned some paragraphs recently. I 'd like to share with you all the plug-ins that I used to write. I hope this will be helpful to you, I also hope that some experts can help me with my writing shortcomings and errors. I have been writing my own things for a long time. In terms of performance, I can only try to keep myself close to the problem ...... Sincerely ask for advice;
Plug-In Introduction: Execute the animation effects such as fade-in. This plug-in can be used as an additional plug-in to work with a pop-up layer that I sent earlier, and so on to increase the fun of js display,
Usage: I wrote it in front of the following js code. You can copy and paste it directly. If you have any questions, contact me.The JS Code is displayed as follows. You can copy the following HTML to view the code.
[Javascript]

The Code is as follows:

/*
CreateByTommy_20110525
Emial: @ csslife@163.com
Purpose:
Execute gradient and other animation Effects
Description of input parameters:
1. The first parameter is the object or ID to be transformed;
2. The second parameter is an object that contains:
1). sty-> attributes to be changed for the object to be changed. The default value is to change the width (you can also specify attributes other than the style, such as scrollTop)
2). curClass-> the current class to be added after the transformation object is changed. The default value is null.
3), maxVal-> change to the maximum value. The default value is 0 (if the curClass is a style attribute with higher width, it indicates hiding). When the attribute value to be changed is reached, the animation will be stopped.
4) effect-> the default animation effect is outQuad. If you need the bounce effect, set it to 2.
3. The last parameter is an optional parameter, indicating the callback function that runs after the animation is executed.
*/

// Animation
Var ani = function () {this. init. apply (this, arguments )}
Ani. prototype = {
_ Id: function (I ){
If (! I) return;
Return typeof I! = "String" & I. nodeType = 1? I: document. getElementById (I );
},
Init: function (e, s, callback ){
This. e = this. _ id (e );
This. setInit (s || {});
Var maxS = parseInt (this. s. maxVal), speed = maxS = 0? Math. max (this. getSty (this. e, this. s. sty), 1): maxS/5;
This. fun (speed, maxS, callback)
},
Formula: function (x ){
Var f;
Switch (this. s. effect ){
Case 0:
F = "outQuad ";
Break;
Case 1:
F = "inQuad ";
Break;
Case 2:
F = "bounce ";
Break;
Default:
F = "easeInBack ";
}
This. tween = {
OutQuad: function (pos) {return Math. pow (pos, 2)}, // outQuad
InQuad: function (pos) {return-(Math. pow (pos-1), 2)-1)}, // inQuad
Bounce: function (pos) {// bounce
If (pos <(1/2.75 )){
Return (7.5625 * pos );
} Else if (pos <(2/2.75 )){
Return (7.5625 * (pos-= (1.5/2.75) * pos +. 75 );
} Else if (pos <(2.5/2.75 )){
Return (7.5625 * (pos-= (2.25/2.75) * pos +. 9375 );
} Else {
Return (7.5625 * (pos-= (2.625/2.75) * pos +. 984375 );
}
},
EaseInBack: function (pos) {var s = 1.70158; return (pos) * pos * (s + 1) * pos-s );}
};
Return this. tween [f] (x );
},
FindAry: function (attr ){
Var rg = ["width", "height", "top", "bottom", "left", "right", "margin", "padding"];
For (var z in rg ){
If (rg [z] = attr) return true;
}
Return false;
},
SetInit: function (s ){
This. s = {
Sty: "width ",
CurClass :"",
MaxVal: 0, // maximum effect
Effect: 1 // execution result
}
For (I in s) this. s [I] = s [I];
},
SetSty: function (x ){
Var attr = this. s. sty;
If (this. findAry (attr )){
This. e. style [attr] = x + 'px ';
Var isIE6 = navigator. appVersion. indexOf ("MSIE 6")>-1;
IsIE6 & attr = "top" & (this. e. style [attr] = x + document.doc umentElement. scrollTop + 'px ');
} Else if (attr = "opacity "){
This. s. maxVal ===1 & (this. e. style. display = "block ");
This. e. style. opacity = x;
This. e. style. filter = "alpha (opacity =" + x * 100 + ")";
} Else {
This. e [this. s. sty] = x
}
},
GetSty: function (e, s ){
Var val = e. currentStyle? E. currentStyle [s]: document. defaultView. getComputedStyle (e, null) [s];
Return parseInt (val) | 0;
},
Fun: function (f, m, callback ){
Var D = Date, t = new D, e, T = 500, _ this = this;
Return e = setInterval (function (){
Var z = Math. min (1, (new D-t)/T ),
C = _ this. s. curClass,
CurC = _ this. e. className;
_ This. setSty (+ f + (m-f) * _ this. formula (z ));
If (z = 1 ){
If (callback & typeof callback = 'function') callback ();
_ This. s. maxVal = 0 & (_ this. e. getAttribute ("style") & (_ this. e. style. display = "none ");
If (c! = "" & CurC. indexOf (c) <0) _ this. e. className + = c;
ClearInterval (e );
}
}, 10 );
}
}

This is the first DEMO1 shown in this js:
[Html]

The Code is as follows:

Test

Shopping Cart

My Shopping Cart