JavaScript to create the implementation code of the motion Framework _ Basics

The encapsulated motion frame Move (obj,attr,itarget) can be directly invoked:

Can be used to set the width, border, fontsize, MarginLeft, opacity and many other common property values of variable speed change, to achieve a variety of interesting effects.

Compatible with IE and ff.

Copy Code code as follows:

/****************
*
* Ie-bug:
* In IE, when setting the Opacity property, the Opacity property must be set in the element style to read the opacity value.
*
* obj: Element object.   attr: A property name surrounded by quotes. ITarget: Property target value.
*
*****************/

function Move (obj,attr,itarget) {
Clearinterval (Obj.timer);//Close the previous timer to solve the timer overlay problem when multiple move () calls are simultaneously on the same object. Use Obj.timer to give each object that calls move () a separate timer to prevent multiple objects from simultaneously calling move () with a timer that causes related interference problems.
Obj.timer=setinterval (function () {
var cur=0;//creates a variable that stores the value of the Attr property every moment
if (attr== "opacity") {
For the Opacity property value in FF is a floating-point numeric problem, the property value is rounded and converted to a floating-point type. Multiplied by 100 so that the value of the opacity attribute is unified with IE as a percentage
Cur=math.round (parsefloat (GetStyle (obj,attr)) *100);
}else{
Cur=parseint (GetStyle (obj,attr)), convert the initial value of a property (Width/fontsize/marginleft, etc.) except opacity to an integral type
}
var speed= (itarget-cur)/10;//creates a descending speed speed variable. Implement variable change of attribute value

Speed=speed>0? Math.ceil (Speed): Math.floor (Speed), and/or rounding, resolving the browser to ignore the value of less than 1px caused by the end of the motion, the target value itarget less pixels of the problem

if (itarget==cur) {//when the target value equals the target value, the end timer
Clearinterval (Obj.timer);
}else{
cur+=speed;//the current value cur plus the descending speed value speed
if (attr== "opacity") {
Set opacity property 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"; Adds a value to the specified property attr cur+speed
}
}
},30);
}
The GetStyle () function is used for compatibility with IE and FF: Gets the value of an attribute in a non-row style of an object. Obj: Element object. Name: property name.
function GetStyle (obj,name) {
if (Obj.currentstyle) {
return obj.currentstyle[name];//for IE
}else{
Return getComputedStyle (obj,false) [Name];//for FF
}
}