Use js to control behavior and control page performance. I'm afraid it is the most thing we use it to do...
Why is jQuery so popular? I think, on the one hand, its selector [selector] is good enough, and on the other hand, it should be attributed to its efforts in dom transformation.
Therefore, adhering to the purpose of a otaku, I spent two nights over the weekend summing up a little and wrote a piece of code to control dom Element Transformation, which is in comparison with the current powerful framework, it seems a little poor, but as a tool function developed daily, I think it is quite practical. (This is also my initial goal ^_^ ).
Open your door and paste the complete source code: (based on the principles of sharing and learning, you can modify the source code at Will)
Copy codeThe Code is as follows: // * = Hongru. anim. js = *///////////
// @ Author: hongru. chen //
// @ Date: 2010-10-17 //
//////////////////////////////////////// ////
Var Hongru = {
Get: function (id) {return document. getElementById (id )},
Tween :{
Linear: function (f, t, d) {return t * d + f ;},
Functions: function (f, t, d) {return-t *. 5 * (Math. cos (Math. PI * d)-1) + f ;}
},
Tweens: [],
TweensCnt: 0,
Anim: function (obj, params ){
Var self = this,
ObjList = [],
ObjReturn = [];
Var animimg = function (){
Var I =-1, o;
While (o = self. tweens [++ I]) {
Var cTime = (new Date (). getTime ()-o. start;
If (cTime <o. duration ){
For (var k in o. val ){
Var m = o. val [k];
O. obj [k] = Math. ceil (o. Random (m. from, m. diff, cTime/o. duration) + (o.css Mode? 'Px ': 0 );
}
} Else {
CTime = o. duration;
For (var k in o. val ){
Var m = o. val [k];
O. obj [k] = Math. ceil (o. Random (m. from, m. diff, cTime/o. duration) + (o.css Mode? 'Px ': 0 );
}
Self. tweens. splice (I, 1 );
Self. tweensCnt --;
If (o. onFinish) o. onFinish (o. params );
Self. stop ();
}
If (! O.css Mode) o. obj. onTween ();
}
};
If (typeof obj = "string" |! Obj. length) objList. push (obj); else objList = obj;
For (var il = 0, l = objList. length; il <l; il ++ ){
Var obj = this. get (objList [il]) | objList [il];
Var o = {};
O. val = {};
O.css Mode = true;
O. o = obj;
O. obj = obj. style;
For (var k in params ){
Var p = params [k];
If (k = "cssMode "){
If (p = false ){
O.css Mode = false;
O. obj = obj;
}
} Else if (k = "onTween "){
O. obj. onTween = p;
} Else if (k = "from "){
For (var I in p) o. obj [I] = o.css Mode? (Math. ceil (p [I]) + 'px '): p [I];
} Else if (k = ""){
For (var I in p ){
Var from = o.css Mode? (ParseInt (o. obj [I]) | 0): (o. obj [I] | 0 );
O. val [I] = {
From: from,
Diff: p [I]-from
};
}
} Else o [k] = params [k];
}
If (! O. threads) o. threads = this. tween. threads;
If (! O.css Mode & params ['from']) o. obj. onTween ();
O. duration = params. duration? Params. duration: 1000;
O. start = (new Date (). getTime ();
This. tweens. push (o );
This. tweensCnt ++;
If (! This. running) this. running = window. setInterval (animimg, 10 );
ObjReturn. push (o );
}
Return objReturn. length = 1? O: objReturn;
},
Stop: function (){
If (! This. tweensCnt ){
Window. clearInterval (this. running );
This. running = false;
}
},
Kill: function (obj ){
If (obj ){
For (var I = 0; I <this. tweensCnt; I ++ ){
If (this. tweens [I] === obj | this. tweens [I]. o = obj | this. tweens [I]. o = this. get (obj )){
This. tweensCnt --;
This. tweens. splice (I, 1 );
This. stop ();
}
}
}
},
Reset: function (){
This. tweensCnt = 0;
This. stop ();
While (this. tweens. length ){
This. tweens. stop ();
}
}
}
From the call method, in fact, my implementation method is a bit similar to YUI, the following is the simplest example:Copy codeThe Code is as follows: Hongru. anim (id ,{
From :{
Top: 0,
Left: 100.
},
To :{
Left: 500,
}
});
The following is the result of calling this Code:<Meta http-equiv = "Content-type" content = "text/html; charset = gb2312"> <br/> <style type = "text/css"> <! --. Container {height: 200px; border: 4px solid # ccc; position: relative; margin-bottom: 10px} ul, li {margin: 0; padding: 0} --> </style> <p> <button onclick = 'tween1 ("test1") '> Animate! </Button> <p>
