move function -- edition 3 ---perfect-- function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } } function startMove(obj, json, fnEnd) { //关定时器 clearInterval(obj.timer); //打开定时器 obj.timer = setInterval(function () { // 3 //设定一个变量为真,这里的前提是假设所有的值到已经到达目标点 var bStop = true; for (var attr in json) { var cur = 0; // 如果属性是opacity 怎么取数字 if (attr === 'opacity') { cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { cur = parseInt(getStyle(obj, attr)); //这个时候传入的都是其他的样式如width等 } // 设定变化的速度,渐变,所以还要取整 var speed = (json[attr] - cur) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 是否到达 /* if (cur === json[attr]) // 1 //json[attr]相当于当前循环的目标点 { clearInterval(obj.timer); // 2 // 如果用这种方式停止的话,可能会出现我们同时需要变化两个值 width 100->101, height 100 -> 1000, //那么根据if, 当101到达的时候,就会停止定时器,这时候height的值肯定还没有到达1000。 // 所以这里是有一个小的bug,所以这里需要重写 if(fnEnd)fnEnd(); } else { if(attr === 'opacity') { obj.style.filter='alpha(opacity:'+(cur+speed)+')'; obj.style.opacity=(cur+speed)/100; //document.getElementById('txt1').value = obj.style.opacity; } else { obj.style[attr] = cur+speed+'px'; } }*/ // 4 //如果有一个值没有到达目标点 if (cur != json[attr]) { bStop = false; } // 5 // 重写 是否到达这一步 if (attr === 'opacity') { obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')'; obj.style.opacity = (cur + speed) / 100; } else { obj.style[attr] = cur + speed + 'px'; } } // 6 // 根据上面的bStop的真假来进行定时器的关闭 if (bStop) { clearInterval(obj.timer); if (fnEnd) fnEnd(); } }, 30); }