OO-based animation appending plug-ins can achieve bounce, fade, and other animation Effects

I have been busy for a long time and haven't written anything. I have just mentioned some paragraphs recently. I 'd like to share all the plug-ins I have written in the past, I hope it will be helpful to everyone, and I hope some experts can help me to give some advice on my writing shortcomings and errors. I have been writing my own things all the time... syntaxHighlighter. all ();

I have been busy for a long time and haven't written anything. I have just mentioned some paragraphs recently. I 'd like to share all the plug-ins I have written in the past, I hope it will be helpful to everyone, and I hope some experts can help me to give some advice on my writing shortcomings and errors. I have been using my own writing, in terms of performance, I can only try to stay 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]
/*
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]
 
 
 
 
Test 
 
 
 
 


Shopping Cart


My Shopping Cart