JS perfect motion framework and JS perfect motion framework

JS perfect motion framework and JS perfect motion framework

Function getStyle (obj, name) {if (obj. currentStyle) {return obj. currentStyle [name];} else {return getComputedStyle (obj, false) [name] ;}// note: In a multi-object motion frame, nothing can be shared! Otherwise, a problem occurs. add necessary variables to the attributes of an object. That is, the property is bound to the Motion Object: speed, other attribute values (such as transparency) function startMove (obj, json, fnEnd) // The Perfect motion frame // is converted to json, for example: startMove (oDiv, {width: 400, height: 400}) {clearInterval (obj. timer); obj. timer = setInterval (function () {var bStop = true; // key // assume that all values have reached for (var attr in json) // use a loop, package the original set of items in it. Every time the timer is executed, it will loop. 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 of this, a problem occurs, decimal number} else { Cur = parseInt (getStyle (obj, attr);} var speed = (json [attr]-cur)/6; speed = speed> 0? Math. ceil (speed): 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 have arrived, disable the timer {clearInterval (obj. timer); if (fnEnd) fnEnd () ;}, 30 );}

Note:

Obj ---------------> nodes that are in motion

Json ------------> which motion is to be performed, for example, {width: 300, height: 200} 300 and 200 are the target point?

Fu ---------------> the operation after the exercise ends, for example, a pop-up window or something appears after the exercise ends.

This JS perfect motion framework is from CSS2 ~

In CSS3, there is also a framework that surpasses the perfect motion frame ~ The framework can be used in CSS3 and CSS2 ~