JS Motion Frame

/** * Use offsetleft, pay attention to the use of margin * offsetleft = Margin-left + left; * offsetwidth= padding + border + width; * * @author Lonve*/function GetStyle (elem,attr) {varresult =NULL; Result= Elem.currentstyle?elem.currentstyle[attr]:getcomputedstyle (Elem,false) [attr]; if(attr=="Opacity"){        returnparseint (parsefloat (Result) * -); }    returnparseint (result);}varTimer =NULL;//Uniform motion Stop Condition---> distance close enoughfunction offsetMove1 (offset) {varOdiv = document.getElementById ("Odiv"); varSpeed =0; speed= Odiv.offsetleft < offset?Ten:-Ten;    Clearinterval (timer); Timer=setinterval (function () {if(Odiv.offsetleft >= offset) {//Math.Abs (odiv.offsetleft-offset) <speed;clearinterval (timer); }Else{oDiv.style.left= Odiv.offsetleft + speed +"px"; }    }, -)}//easing motion conditions 1. Variable motion speed with zero final velocity//question: Offsetleftfunction OffsetMove2 (elem,offset) {clearinterval (Elem.timer); varSpeed =0; Elem.timer=setinterval (function () { speed= (offset-elem.offsetleft)/8; speed= speed>0?Math.ceil (Speed): Math.floor (speed); //whether to reach the target point        if(Elem.offsetleft = =offset)        {clearinterval (Elem.timer); }Else{elem.style.left= Elem.offsetleft + speed +"px"; }    }, -)}//any attribute value//Avoid small value parseint (0.3*100)function OffsetMove3 (elem,attr,offset) {clearinterval (Elem.timer); Elem.timer=setinterval (function () {varCurattr = GetStyle (elem,attr);//Current Property value        varSpeed = (offset-curattr)/8;//Current SpeedSpeed = speed>0?Math.ceil (Speed): Math.floor (speed); if(offset = =curattr)        {clearinterval (Elem.timer); }Else{            if(attr=="Opacity") {Elem.style.filter="Alpha (opacity="+ (curattr +speed) +")"; Elem.style.opacity= (curattr + speed)/ -; }Else{elem.style[attr]= (curattr + speed) +"px"; }        }    }, -)}//chain-Type motionfunction OffsetMove4 (ELEM,ATTR,OFFSET,FN) {clearinterval (Elem.timer); Elem.timer=setinterval (function () {varCurattr =GetStyle (elem,attr); varSpeed = (offset-curattr)/8; speed= Speed >0?Math.ceil (Speed): Math.floor (speed); if(offset = =curattr)            {clearinterval (Elem.timer); if(FN) {fn ();} }Else{            if(attr=="Opacity") {Elem.style.filter="Alpha (opacity:"+ (Curattr+speed) +")"; Elem.style.opacity= (curattr+speed)/ -; }Else{elem.style[attr]= curattr + speed +"px"; }        }    }, -)}//Multiple properties change at the same timefunction OffsetMove5 (ELEM,JSON,FN) {varIsstop =true;//all values are reachedclearinterval (Elem.timer); Elem.timer=setinterval (function () {//Calendar JSON Properties         for(varattrinchJSON) {            //1. Take Current and speed            varoffset =Json[attr]; varCurattr =GetStyle (elem,attr); varSpeed = (offset-curattr)/8; speed= Speed >0?Math.ceil (Speed): Math.floor (speed); //2. Detection Stop            if(offset!=curattr) {Isstop=false; }            if(attr=="Opacity") {Elem.style.filter="Alpha (opacity:"+ (Curattr+speed) +")"; Elem.style.opacity= (curattr+speed)/ -; }Else{elem.style[attr]= curattr + speed +"px"; }        }        //all values reach the target value, then stop        if(isstop) {clearinterval (Elem.timer); if(FN) {fn ();} }    }, -);}

JS Motion Frame