Implementation Code for creating a motion framework using JavaScript

The encapsulated motion frame Move (obj, attr, iTarget) can be called directly:

It can be used to set variable speed changes of many common attribute values, such as width, border, fontSize, marginLeft, and opacity, to achieve a variety of interesting effects.

Compatible with IE and FF.
Copy codeThe Code is as follows:
/****************
*
* IE-BUG:
* In IE, when setting the opacity attribute, you must set the opacity attribute in the element style to read the opacity value.
*
* Obj: Element Object. Attr: the attribute name enclosed by quotation marks. ITarget: attribute target value.
*
*****************/

Function Move (obj, attr, iTarget ){
ClearInterval (obj. timer); // disable the previous timer to overlay the timer when multiple moves () are called for the same object at the same time. Obj. timer is used to assign a timer to each object that calls Move () to prevent the use of a timer when multiple objects call Move () at the same time, leading to related interference problems.
Obj. timer = setInterval (function (){
Var cur = 0; // create a variable to store the value of the attr attribute every moment.
If (attr = "opacity "){
// For the problem that the opacity attribute value in FF is a floating point value, the attribute value is rounded to and converted to the floating point type. Multiply by 100 to make the opacity attribute value and IE uniform as a percentage
Cur = Math. round (parseFloat (getStyle (obj, attr) * 100 );
} Else {
Cur = parseInt (getStyle (obj, attr); // convert the initial values of attributes other than opacity (width, fontSize, MarginLeft, etc.) to integer values.
}
Var speed = (iTarget-cur)/10; // create a decreasing speed variable. Variable Speed Change of attribute values

Speed = speed> 0? Math. ceil (speed): Math. floor

If (iTarget = cur) {// when the target value is equal to the target value, end the timer
ClearInterval (obj. timer );
} Else {
Cur + = speed; // the current value of cur plus the decreasing speed value of speed
If (attr = "opacity "){
// Set the opacity attribute values for IE and FF respectively.
Obj. style. filter = "alpha (opacity:" + cur + ")"; // for IE
Obj. style. opacity = cur/100; // for FF
} Else {
Obj. style [attr] = cur + "px"; // Add the value cur + speed to the specified attr attribute.
}
}
}, 30 );
}
// The getStyle () function is used to be compatible with IE and FF: Get the attribute values of objects in non-interline styles. Obj: Element Object. Name: attribute name.
Function getStyle (obj, name ){
If (obj. currentStyle ){
Return obj. currentStyle [name]; // for IE
} Else {
Return getComputedStyle (obj, false) [name]; // for FF
}
}