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 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. </p
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]
<! Doctype html>
<Html>
<Head>
<Meta charset = "gbk">
<Title> test </title>
<Style>
Div, h6, body {padding: 0; margin: 0 ;}
Div, h6 {font: bold 12px/24px 'tahoma '; text-indent: 15px ;}
. Car-mod {position: relative; width: 200px ;}
. Car-menu {width: 200px; background: # c06; cursor: pointer; color: # fff ;}
. Car-box {border: 2px solid # c06; width: 300px; display: none ;}
. Car-box h6 {background-color: # f5f5f5; background-image:-moz-linear-gradient (# f5f5f5, # fff );}
. Things {border-top: 1px solid # ccc; padding: 50px 15px ;}
</Style>
</Head>
 
<Body>
<Div class = "car-mod" id = "J_car_mod">

<Div class = "car-menu"> shopping cart </div>

<Div class = "car-box" id = "J_car_box">
<H6> my shopping cart <Div class = "things"> </div>
</Div>
 
</Div>
<Script src = "animation. source. js"> </script>
<Script>
(Function (){
// Call animation. js directly when calling this plug-in online. This is compressed.
Var D = document, carMod = D. getElementById ("J_car_mod"), carBox = D. getElementById ("J_car_box"), carControl = true;
// Move to display
CarMod. onmouseover = function (even ){
Var even = even | window. event, target = even.tar get | even. srcElement;
If (target. className = "car-menu "){
!! CarControl & (carObj = new ani (carBox, {maxVal: 1, sty: "opacity"}, function () {carControl = false ;}));
CarObj = null;
}
// Remove from hidden
This. onmouseout = function (even ){
Var e = even | window. event,
Reltg = e. relatedTarget? E. relatedTarget: e. type = 'mouseout '? E. toElement: e. fromElement;
While (reltg & reltg! = This) {reltg = reltg. parentNode ;}
If (reltg! = This ){
! CarControl & (carObj1 = new ani (carBox, {maxVal: 0, sty: "opacity"}, function () {carControl = true ;}));
CarObj1 = null;
}
}
}

})()
</Script>
</Body>
</Html>

This is based on the demo version of the previous pop-up layer. The effect must be copied to the js of the previous pop-up layer. What is the address? Http://blog.csdn.net/nx8823520/article/details/8059445html#code:
[Html]
<! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> pop-up layer case </title>
<Style>
Div {padding: 0; margin: 0 ;}
. Wra {margin: 0 auto; width: 1000px; overflow: hidden ;}
. Menu {border: 1px solid # ccc; background: #000; color: # fff; width: 250px; height: 30px; font: 14px/30px ' '; text-align: center; text-shadow: 1px 1px 2px # f5f5f5; cursor: pointer ;}
. Con {border: 1px solid #000; background: # fff; padding: 30px; width: 500px; height: 200px; position: fixed; top:-150%; left: 50%; margin:-100px 0 0-250px; display: none; z-index: 999 ;}
. Close {display: block; position: absolute; right: 10px; top: 10px; cursor: pointer; font: bold 14px Arial;-moz-transition:-moz-transform. 5 s bytes-in 0 s ;}
. Close: hover {-moz-transform: rotate (360deg );}
</Style>
<Style>
</Style>
</Head>
 
<Body>
<Div class = "wra">
<Div id = "J_popup" class = "menu"> click the pop-up layer </div>
 
<Div id = "J_popup_con" class = "con">
<Span id = "J_colse" class = "close" title = "close"> X </span>
Pop-up layer content
</Div>
<Script src = "popup. js"> </script>
<Script src = "animation. source. js"> </script>
<Script>
Var D = document, m = D. getElementById ("J_popup"), con = D. getElementById ("J_popup_con"), cl = D. getElementById ("J_colse ");
New Popup (m, con, cl, {addFun: function () {new ani ("J_popup_con", {sty: "top", maxVal: "350", effect: 2})}, callBack: function () {con. style. display = "block"; new ani ("J_popup_con", {sty: "top", maxVal: "0 "})}})
</Script>
</Div>
</Body>
</Html>