Page of JavaScript gradient effect page of image control page 1/2

This program can be used to implement many common animation effects, including size conversion, location conversion, and fade-in and fade-out.
Program Description: The principle of gradient effect is to use the timer to continuously set the value. If you want to slow down the effect, set a step (For details, refer to the JavaScript spring effect ).
Here we only integrate the gradient properties (transparency, width, height, left, top) and use the same gradient level (Step) To synchronize the gradient, form a gradient of multiple attributes at the same time.

Here are some useful points:
Final Style]
The final style is also mentioned in the side width acquisition of the JavaScript image cutting effect. When using the data obtained by offset to set the width and height, the Border width in the final style must be subtracted first.
Here I use the muxrwc method to implement currentStyle in FF, so that ff and ie can get the final style from currentStyle:
Copy codeThe Code is as follows:
If (! IsIE ){
HTMLElement. prototype. _ defineGetter _ ("currentStyle", function (){
Return this. ownerDocument. defaultView. getComputedStyle (this, null );
});
}

Use this to obtain the Border width:
Copy codeThe Code is as follows:
This. _ xBorder = function () {return (parseInt (obj. currentStyle. borderLeftWidth) + parseInt (obj. currentStyle. borderRightWidth ));}
This. _ yBorder = function () {return (parseInt (obj. currentStyle. borderTopWidth) + parseInt (obj. currentStyle. borderBottomWidth ));}

[Width or height first]
The width or height priority is to execute one gradient first, and then another gradient.
After a gradient is executed in the Gradient Program, a bool value is returned to indicate whether the gradient is complete. This can be used as follows:
Copy codeThe Code is as follows:
This. SetWidth () & this. SetHeight ();

Because of the & feature, this. SetHeight () is executed only when this. SetWidth () returns true. this is also a good technique.
At the same time, in order to synchronize the gradient, the gradient uses two times the step size:
Copy codeThe Code is as follows:
This. Step = 2 * this. Step;
This. SetOpacity (); this. SetTop (); this. SetLeft ();
This. Step = this. Step/2;

In this way, the width or height is given priority.

[Fixed point gradient]
Let's talk about the principle first. For example, if we use the midpoint of the width as the reference point, we can imagine that if the width is reduced by n, As long as left is increased by n * 0.5 (that is, n/2 ),
Then we can make the result of center transformation with the midpoint (of course, we must first set the object to relative or absolute positioning ).
So how did this "0.5" come from? A little mathematical knowledge should know that the ratio of the left to the transformation point of the gradient object to the total width of the gradient object
Use Width. pos in the program to save this value. Calculate the position of the transformation point before conversion:

This. _ x = this. _ obj. offsetLeft + this. _ obj. offsetWidth * this. Width. pos;
Each transformation resets left based on the position and width:

This. _ obj. style. left = this. _ x-this. _ obj. offsetWidth * this. Width. pos + "px ";

Some people may say that adding the conversion Width * Width. pos on the basis of the original left is not the same?
However, the problem is that the value obtained after multiple transformations (multiple computations before reaching the target value) is inaccurate.
This is because many decimal places are ignored during the transformation calculation process. As the number of computations increases, the result increases,
Therefore, the reference value (_ x) of the transformed position is determined first, so that no matter how many times the transformed position is calculated, it will not go through the position.

Similarly, you only need to set different Width. pos (including negative numbers and numbers greater than 1) and Height. pos to take any point as the center gradient.

In addition, the program design also took a lot of effort. In order to improve the degree of integration, we made a structure of FadeStruct, the "run", "start", "end", and "target" attributes are gradient, start value, end value, and target value respectively.
You have used Object. extend twice to set the default value. For details, see the program.

Instructions for use:

Only one required parameter is the gradient object, but only the gradient object has no effect. You must set other attributes:
Opacity: transparent gradient Parameter
Height: Height Gradient Parameter
Width: gradient Parameter
Top: Top gradient parameters
Left: Left gradient Parameter
Step: 10, // Change Rate
Time: 10, // Change Interval
Mode: "both", // gradient Sequence
Show: false, // whether the status is enabled by default
OnFinish: function () {}// executed upon completion

Among them, Opacity, Height, Width, Top, and Left are special. They are FadeStruct structures.

In the example, instantiate this object:
Copy codeThe Code is as follows:

Var f = new Fade ("idFade", {Show: true,
Opacity: {run: true },
Height: {run: true },
Width: {run: true, pos:. 5 },
Top: {run: true, end: 70}
});

If run is set to true, this transformation is enabled. start and end are the start and end values, and pos is the conversion location attribute exclusive to Height and Width.

For more detailed applications, see instances.