JavaScript Gradient Effect Page Image Control Page 1/2_Page Background

Use this program to achieve many common animation effects, including size change, position change, fade-in and fade-out, etc.
Program description: The principle of gradient effect is to use a timer to continuously set the value. If you want to slow down the effect, set a step size (see JavaScript spring effect for details).
Here we just integrate the attributes that can be gradient (transparency, width, height, left, top), and use the same gradient series (Step) to synchronize the gradient, forming the effect of multiple attributes gradient at the same time.
The following is a useful place:
[Final style]
The final style is also mentioned in the side width acquisition of JavaScript image cutting effect, and the width is set using the data obtained by offset. When calculating the height, you must first subtract the border width in the final style.
Here I used muxrwc to implement the currentStyle method under FF, so that both FF and IE can get the final style from currentStyle:

if(!isIE){ 
HTMLElement.prototype.__defineGetter__("currentStyle", function () { 
return this.ownerDocument.defaultView.getComputedStyle(this, null); 
}); 
}

Use this to get the border width:

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 priority]
Width or height priority actually means executing one of the gradients first, and then executing the other gradient after completion.
After executing a gradient in the gradient program, a bool value will be returned to indicate whether the gradient is completed. You can use this like this:

this.SetWidth() && this.SetHeight();

Due to the characteristics of &&, when this.SetWidth() returns true Only then will this.SetHeight() be executed, which is also a good technique.
At the same time, in order to synchronize the gradient, the other gradient uses twice the step size:

this.Step = 2*this.Step; 
this.SetOpacity(); this.SetTop(); this.SetLeft(); 
this.Step = this.Step/2;

This way, the effect of width or height priority can be achieved.
[Fixed point gradient]
Let’s talk about the principle first. For example, using the midpoint of the width as the reference point, you can imagine that if the width decreases by n, then as long as the left increases by n*0.5 (i.e. n/2 ),
Then you can create the effect of transformation centered on the midpoint (of course, you must first set the transformation object to relative or absolute positioning).
Then where does this “0.5” come from? If you have some mathematical knowledge, you should know that it is the ratio of the left side of the gradient object to the transformation point and the total width of the gradient object
Use Width.pos to save this value in the program, and calculate the position of the transformation point before transformation:

this ._x = this._obj.offsetLeft this._obj.offsetWidth * this.Width.pos;
Each transformation resets left according to this position and width:

this._obj.style.left = this._x - this._obj.offsetWidth * this.Width.pos "px";

Some people may say that it is not the same to directly add the transformation width *Width.pos on the basis of the original left?
But the problem is that the value obtained after multiple transformation calculations (there will be multiple calculations before reaching the target value) is no longer accurate.
Because many decimals will be ignored during the transformation calculation process, and the discrepancy in the results will become larger as the number of calculations increases.
So the transformation position reference value (_x) is determined first, so that no matter how many times the transformation position is calculated, the transformation position will be the same. It won't move.

Similarly, as long as you set different Width.pos (including negative numbers and numbers greater than 1) and Height.pos, you can center the gradient on any point.

In addition, a lot of thought was spent on the design of the program. In order to improve the integration, a FadeStruct structure was made, in which the run, start, end, and target attributes are respectively whether to gradient, the start value, and the end value. , target value.
Used Object.extend twice to set the default value. Please see the program for details.
Instructions for use:
There is only one necessary parameter, which is the gradient object. However, only the gradient object has no effect. Other attributes must be set:
Opacity: transparent gradient parameter
Height: Height gradient parameter
Width: Width gradient parameter
Top: Top gradient parameter
Left: Left gradient parameter
Step:10,//Change rate
Time:10,//Change Interval
Mode: "both",//Gradient order
Show:false,//Whether it is open by default
onFinish:function(){}//Execute when completed
Where Opacity, Height, Width, Top, and Left are special. They are FadeStruct structures. This object is instantiated in the example:

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

For more detailed applications, please see examples.
Program code: