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