Javascript controllable and transparent effects implementation code _ javascript skills

Transparent effects are one of the simplest effects mentioned by script. aculo. us. Since it is a special effect, it must involve the concept of time and space. We can use setTimeout and setInterval for time. I personally prefer setTimeout. Although it is registered repeatedly for each call, it is more controllable. The space is fully displaced by the absolute position of CSS. Before getting started, let's practice the recursive usage of setTimeout (used to simulate setInterval ).

The Code is as follows:

Function text (el ){
Var node = (typeof el = "string ")? Document. getElementById (el): el;
Var I = 0;
Var repeat = function (){
SetTimeout (function (){
Node. innerHTML = "" + I + "";
I ++;
If (I <= 100 ){
SetTimeout (arguments. callee, 100 );
}
}, 100)
}
Repeat ();
}

Let's try out the simplest light effect, which is to change the line of node. innerHTML to the transparency setting.

The Code is as follows:

Function fadeIn (el ){
Var node = (typeof el = "string ")? Document. getElementById (el): el;
Var I = 0;
Var fade = function (){
SetTimeout (function (){
! + "\ V1 "? (Node. style. filter = "alpha (opacity =" + I + ")"): (node. style. opacity = I/100 );
I ++;
If (I <= 100 ){
SetTimeout (arguments. callee, 100 );
}
}, 100)
}
Fade ();
}

But this is not perfect, because the IE filter may expire in IE7. We must use zoom = 1 to activate hasLayout. Let's add some configurable parameters to expand it. The comment is already very detailed. I don't understand. Ask me again in the message.

The Code is as follows:

Function opacity (el ){
// Required Parameter
Var node = (typeof el = "string ")? Document. getElementById (el): el,
// Optional parameter
Options = arguments [1] | | {},
// Change duration
Duration = options. duration | 1.0,
// Transparency at the beginning
From = options. from | 0.0,
// Transparency at end
To = options. to | 0.5,
Operation = 1,
Init = 0;
If (to-from <0 ){
Operation =-1,
Init = 1;
}
// Internal Parameters
// SetTimeout execution interval, in milliseconds
Var frequency = 100,
// Set the number of repeated calls
Count = duration * 1000/frequency,
// Calculates the increment of each transparency.
Detal = Math. abs (to-from)/count,
// Number of ongoing times
I = 0;
Var main = function (){
SetTimeout (function (){
If (! + "\ V1 "){
If (node. currentStyle. hasLayout) node. style. zoom = 1; // prevents filter invalidation
Node. style. filter = "alpha (opacity =" + (init * 100 + operation * detal * I * 100). toFixed (1) + ")"
} Else {
Node. style. opacity = (init + operation * detal * I). toFixed (3)
}
Node. innerHTML = (init + operation * detal * I). toFixed (3)
I ++;
If (I <= count ){
SetTimeout (arguments. callee, frequency );
}
}, Frequency)
}
Main ();
}

Demo:

<Style>. text {width: 100px; height: 100px; background: red; display: inline-block; }</style> <p class = "text" onclick = "opacity (this, {duration: 4.0, from: 0.0, to: 1}) "> </p> <p class =" text "onclick =" opacity (this, {duration: 4.0, from: 1.0, to: 0}) "> </p> script function opacity (el) {// required parameter var node = (typeof el = "string ")? Document. getElementById (el): el, // optional parameter options = arguments [1] | |{}, // change duration = options. duration | 1.0, // transparency from = options at the beginning. from | 0.0, // transparency to = options at the end. to | 0.5, operation = 1, init = 0; if (to-from <0) {operation =-1, init = 1 ;} // internal parameter // setTimeout execution interval, in milliseconds var frequency = 100, // sets the number of repeated calls count = duration * 1000/frequency, // sets the increment of transparency. detal = Math. abs (to-f Rom)/count, // number of ongoing times I = 0; var main = function () {setTimeout (function () {if (! + "\ V1") {if (node. currentStyle. hasLayout) node. style. zoom = 1; // prevents filter invalidation node. style. filter = "alpha (opacity =" + (init * 100 + operation * detal * I * 100 ). toFixed (1) + ")"} else {node. style. opacity = (init + operation * detal * I ). toFixed (3)} node. innerHTML = (init + operation * detal * I ). toFixed (3) I ++; if (I <= count) {setTimeout (arguments. callee, frequency) ;}}, frequency)} main ();} script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

But the above is not perfect. There is a Bug. We use the short-circuit operator to determine whether to use the default parameter or the input parameter, but in javascript, the number 0 or even 0.0 is automatically converted to false. Therefore, in the first example, if we input 0 in to, it will never use this 0, but the default 0.5. Solution: convert it to the string "0 ". In addition, the parameter I is not necessary. We can save it and use count to take charge of all the cycles. But in this way, our thinking will be reversed. It turns out to be a plus. We want to reduce it.

The Code is as follows:

Function opacity (el ){
// Required Parameter
Var node = (typeof el = "string ")? Document. getElementById (el): el,
// Optional parameter
Options = arguments [1] | | {},
// Change duration
Duration = options. duration | 1.0,
// Transparency at the beginning
From = options. from | 0.0,
// Transparency at end
To = (options. to & options. to + "") | 0.5,
Operation =-1,
Init = 1;
If (to-from <0 ){
Operation = 1,
Init = 0;
}
// Internal Parameters
// SetTimeout execution time, in the unit
Var frequency = 100,
// Set the number of repeated calls
Count = duration * 1000/frequency,
// Calculates the increment of each transparency.
Detal = operation * Math. abs (to-from)/count;
Var main = function (){
SetTimeout (function (){
If (! + "\ V1 "){
If (node. currentStyle. hasLayout) node. style. zoom = 1; // prevents filter invalidation
Node. style. filter = "alpha (opacity =" + (init * 100 + detal * count * 100). toFixed (1) + ")"
} Else {
Node. style. opacity = (init + detal * count). toFixed (3)
}
Count --;
If (count + 1 ){
SetTimeout (arguments. callee, frequency );
}
}, Frequency)
}
Main ();
}

Further Optimization, using the prototype sharing method.

The Code is as follows:

Function Opacity (el ){
Var node = (typeof el = "string ")? Document. getElementById (el): el,
Options = arguments [1] | | {},
Duration = options. duration | 1.0,
From = options. from | 0.0,
To = (options. to & options. to + "") | 0.5,
Operation =-1,
Init = 1;
If (to-from <0 ){
Operation = 1,
Init = 0;
}
Var frequency = 100,
Count = duration * 1000/frequency,
Detal = operation * Math. abs (to-from)/count;
This. main (node, init, detal, count, frequency );
}
Opacity. prototype = {
Main: function (node, init, detal, count, frequency ){
SetTimeout (function (){
If (! + "\ V1 "){
If (node. currentStyle. hasLayout) node. style. zoom = 1; // prevents filter invalidation
Node. style. filter = "alpha (opacity =" + (init * 100 + detal * count * 100). toFixed (1) + ")"
} Else {
Node. style. opacity = (init + detal * count). toFixed (3)
}
Node. innerHTML = (init + detal * count). toFixed (3)
Count --;
If (count + 1 ){
SetTimeout (arguments. callee, frequency );
}
}, Frequency)
}
}

DEMO code:

<Style>. text {width: 100px; height: 100px; background: red; display: inline-block; }</style> <p class = "text" onclick = "new Opacity (this, {duration: 4.0, from: 0.0, to: 1}) "> </p> <p class =" text "onclick =" new Opacity (this, {duration: 4.0, from: 1.0, to: 0}) "> </p> <script type =" text/javascript "> function Opacity (el) {var node = (typeof el = "string ")? Document. getElementById (el): el, options = arguments [1] ||{}, duration = options. duration | 1.0, from = options. from | 0.0, to = (options. to & options. to + "") | 0.5, operation =-1, init = 1; if (to-from <0) {operation = 1, init = 0 ;} var frequency = 100, count = duration * 1000/frequency, detal = operation * Math. abs (to-from)/count; this. main (node, init, detal, count, frequency);} Op Acity. prototype = {main: function (node, init, detal, count, frequency) {setTimeout (function () {if (! + "\ V1") {if (node. currentStyle. hasLayout) node. style. zoom = 1; // prevents filter invalidation node. style. filter = "alpha (opacity =" + (init * 100 + detal * count * 100 ). toFixed (1) + ")"} else {node. style. opacity = (init + detal * count ). toFixed (3)} node. innerHTML = (init + detal * count ). toFixed (3) count --; if (count + 1) {setTimeout (arguments. callee, frequency) ;}}, frequency)} script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]