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

Source: Internet
Author: User
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





Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.