JS's Perfect motion frame

function GetStyle (obj, name) {if (Obj.currentstyle) {return obj.currentstyle[name];} else{return getComputedStyle (obj, FALSE) [name];}} Note: In a multi-object motion frame, everything is not public! Otherwise the problem, the BUG, and the necessary variables are added to the properties of the object on the line. That is: The property is bound to the moving object: speed, other attribute values (such as transparency, and so on) function startmove (obj, JSON, fnend)//Perfect motion frame//For JSON, such as: Startmove (Odiv, {width:400,   height:400}) {clearinterval (Obj.timer); Obj.timer=setinterval (function () {var bstop=true; The key//hypothesis: All values have been reached for the (Var attr in JSON)//With a loop, the original set of things wrapped in the inside, each time the timer executes, will cycle, the number of cycles depends on what is written in the JSON {var cur=0;if (attr== ' opacity ') {Cur=math.round (parsefloat (GetStyle (obj, attr)) *100);//Because here, there will be a problem, fractional}else{cur=parseint (GetStyle (obj, attr));} var speed= (json[attr]-cur)/6;speed=speed>0? Math.ceil: Math.floor (Speed), if (Cur!=json[attr]) bstop=false;if (attr== ' opacity ') {obj.style.filter= ' alpha ( Opacity: ' + (cur+speed) + ') '; obj.style.opacity= (cur+speed)/100;} else{obj.style[attr]=cur+speed+ ' px ';}} if (bstop)//If all values are reached, close timer {clearinterval (obj.timer); if (fnend) Fnend ();}}, 30); }

Description

obj---------------> Moving nodes

JSON------------> What to do with: {width:300,height:200} 300, 200 as the target point

Fu---------------> action after the end of the exercise such as: a pop-up window after the end of the campaign

This JS perfect motion frame is CSS2 ~

In CSS3 there is a framework beyond the perfect frame of motion-the frame in CSS3 and CSS2.

JS's Perfect motion frame