Home > Developer > JavaScript
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:
<! Doctype html> <pead> <meta http-equiv = "Content-type" content = "text/html; charset = gb2312 "/> <title> Tweens demo </title> <style type =" text/css "> </style> </pead> <body> <button onclick = 'tween1 ("test1 ") '> Animate! </Button> <br> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Of course, this is the simplest way. In addition, I spent some time thinking about the parameter id. The first parameter of anim () can not only be our common string "id ", it can also be HtmlObject, for example, the above Code:
Copy codeThe Code is as follows:
Function tween1 (id) {// This id parameter can be obj, string id, or array ['id1', 'id2', 'id3 ']
Hongru. anim (id ,{
From :{
Top: 0,
Left: 100.
},
To :{
Left: 500,
}
});
}
You can call an element like this.
Onclick = "tween1 (this )"
This points directly to the element itself, as shown below.
<! Doctype html> <pead> <meta http-equiv = "Content-type" content = "text/html; charset = gb2312 "/> <title> Tweens demo </title> <style type =" text/css "> </style> </pead> <body> click me! </Body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
In addition, you can control the simultaneous transformation of multiple elements, that is, the id can be an array such as ['id1', 'id2', 'id3 ']. The demo is as follows:
<! Doctype html> <pead> <meta http-equiv = "Content-type" content = "text/html; charset = gb2312 "/> <title> Tweens demo </title> <style type =" text/css "_ mce_bogus =" 1 "> </style> </pead> <body> <button onclick = 'tween1 ("test1 ") '> Animate! </Button> <button onclick = 'tween1 (["test1", "test2"]) '> Animate all! </Button> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The preceding functions support the object and array selector functions ],
[Function 2]
The callback function callback is used to implement the chain-animate and chain transformation. Specifically, the onFinish parameter is used. The core source code is very simple, that is, to judge whether there is onFinish after a transformation is completed. If so, call:
Copy codeThe Code is as follows:
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 ();
}
};
The following is an example of implementing chain-animate through recursive calls:
<! Doctype html> <pead> <meta http-equiv = "Content-type" content = "text/html; charset = gb2312 "/> <title> Tweens demo </title> <style type =" text/css "> </style> </pead> <body> <button onclick = 'If (! Hongru. running) tween2 ("test3") '> Animate! </Button> <button onclick = 'hongru. kill ("test3") '> Stop </button> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
So far, I believe that this is not enough for students who have done similar jobs before. After all, it is not difficult to change all the attributes that are tied to the 'box model. For example, attributes such as height, padding, margin, left, and top can be measured in pixels. Their transformations can all be unified. But if we want to implement color transformation and transparency transformation, I am afraid it is not what I can do in just a few hundred lines of code.
Yes, I admit, to encapsulate all the attribute transformations, such as color and transparency, the judgment that needs to be done is not a matter of two. So here, I have not encapsulated attribute transformations other than the "box model. But it does not mean that they did not think of their implementation methods.
Since it is time-consuming to write code to death, it is okay to write two more statements of code when we call it ourselves. After all, the code is dead and people are active. I have made a cssMode parameter judgment here (the idea is to learn from a foreigner ). The Code cost is very low. If it is not possible to use px as the unit attribute, we can control its style transformation by ourselves. For example, implement background color conversion:
Copy codeThe Code is as follows:
Function test3 (id ){
Hongru. anim (id ,{
CssMode: false, // animation will be handled by an external function
OnTween: function (){
// Custom function, can be as simple or as complex as needed
This. style. background = "RGB (" + this. r + "," + this. g + "," this. B ")";
},
From: {r: 0, g: 0, B: 0 },
To: {r: 255, g: 128, B: 100}
});
}
After setting cssMode to false, the code in onTween will be executed, so that you can control the style change on your own, as shown above. The demo is as follows:
<! Doctype html> <pead> <meta http-equiv = "Content-type" content = "text/html; charset = gb2312 "/> <title> Tweens demo </title> <style type =" text/css "_ mce_bogus =" 1 "> </style> </pead> <body> <button onclick = "test3 ('o-anim ') "> Animate! </Button> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
You can also set the transparency,
<! Doctype html> <pead> <meta http-equiv = "Content-type" content = "text/html; charset = gb2312 "/> <title> Tweens demo </title> <style type =" text/css "_ mce_bogus =" 1 "> </style> </pead> <body> <button onclick = "test3 ('o-anim ') "> Animate! </Button> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Well, in view of the length and time, this article is basically introducing functions, and I am not going to elaborate on the Code. If you are interested, you can look at it yourself. The source code is also posted, and the principle is not difficult.
In addition, in the use of this function, Hongru. kill (id) is to stop the transformation of the specified object. Hongru. reset () is the effect of stopping all ongoing transformations. As for Hongru itself, you can change it at will.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
