This article mainly introduces the usage of the javascript motion framework, and analyzes the implementation and usage skills of the javascript motion framework in the form of examples to implement the function of enlarging and downgrading the div block, for more information, see the examples in this article. We will share this with you for your reference. The details are as follows:
The motion frame can realize the arbitrary motion of multiple objects.
The running effect is as follows:
Example:
Motion FrameScript window. onload = function () {var oBtn = document. getElementById ('btn1 '); var oDiv = document. getElementById ('p1'); oBtn. onclick = function () {startMove (oDiv, {width: 200, height: 200, opacity: 100}, function () {startMove (oDiv, {width: 100, height: 100, opacity: 30}) ;};}; function getStyle (obj, attr) {if (obj. currentStyle) {return obj. currentStyle [attr];} else {return getComputedStyle (obj, fals E) [attr] ;}} function startMove (obj, json, fn) {clearInterval (obj. timer); obj. timer = setInterval (function () {var bStop = true; for (var attr in json) {var iCur = 0; if (attr = 'opacity ') {iCur = Math. round (parseFloat (getStyle (obj, attr) * 100);} else {iCur = parseInt (getStyle (obj, attr ));} var iSpeed = (json [attr]-iCur)/8; iSpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed); if (iCur! = Json [attr]) {bStop = false;} if (attr = 'opacity ') {obj. style. filter = 'Alpha (opacity = '+ (iCur + iSpeed) +') '; obj. style. opacity = (iCur + iSpeed)/100 ;}else {obj. style [attr] = iCur + iSpeed + 'px ';} if (bStop) {clearInterval (obj. timer); if (fn) {fn () ;}}, 30);} script