47, the JavaScript movement----the perfect motion frame application----Enlarges reduces the picture the realization (Layout transformation realization) __java

1, JavaScript motion----Perfect Motion frame application----enlarge and reduce the realization of the picture

2. Test code

2.1 Move.js

/** * can be easily obtained by non-row style value * @param {object} obj * @param {object} attr/function GetStyle (obj, attr) {if (obj.current
	Style) {return obj.currentstyle[attr];
	else {return getComputedStyle (obj, false) [attr]; }/** * To pay attention to the judgement of the motion stop condition * @param {object} obj * @param {object} JSON * @param {object} fn/function Startmove (obj, J
	Son, fn) {clearinterval (Obj.timer);
			Obj.timer = setinterval (function () {var bstop = true;//This time the campaign is over-all values have reached the for (Var attr in json) {//1. Take the current value ֵ

			var icur = 0;
			if (attr = = ' opacity ') {icur = parseint (parsefloat (obj, getstyle)) * 100);
			else {icur = parseint (GetStyle (obj, attr));
			//2 speed var ispeed = (json[attr]-icur)/8; Ispeed = ispeed > 0?

			Math.ceil (ispeed): Math.floor (Ispeed); 3. Check stop//To note that perfect motion frame motion stop detection is not the same as the detection of a single attribute stop//This is to wait for all the attributes, all have arrived, just stop the movement//So there is a property value is not arrived, will flag motion stop variable bstop set to False 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 ';

			}//4, for motion judgment if (bstop) {clearinterval (Obj.timer);
			if (FN) {fn (); }}, 30)}

2.2 HTML code

 
3. Test picture