oDiv1.onclick = function() { startMove(this, { width : 200, height: 300 }, 10); } function startMove(obj, json, iSpeed) { clearInterval(obj.iTimer); var iCur = 0; obj.iTimer = setInterval(function() { iBtn = true;//每一次运动前都初始化为真，就是假设所有属性都到了 for ( var attr in json ) { (attr == 'opacity') { iCur = Math.round(getStyle( obj, 'opacity' ) * 100); } else { iCur = parseInt(getStyle(obj, attr)); } if (iCur != iTarget) { iBtn = false; //如果有一个属性没到，就把这个开关变成假if (attr == 'opacity') { obj.style.opacity = (iCur + iSpeed) / 100; obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')'; } else { obj.style[attr] = iCur + iSpeed + 'px'; } } } (iBtn) { clearInterval(obj.iTimer); } }, 30); } function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } }

扩大需求：假如我们这次实现的不是多个属性同时运动，我希望先把高改变，接着再改变宽，这个时候，我们需要的就是个回调函数了（fn）。za

oDiv1.onclick = function() { startMove(this, { width : 200 }, 10, function() { startMove(this, { height : 200 }, 10); }); } function startMove(obj, json, iSpeed, fn) { clearInterval(obj.iTimer); var iCur = 0; obj.iTimer = setInterval(function() { var iBtn = true; for ( var attr in json ) { var iTarget = json[attr]; if (attr == 'opacity') { iCur = Math.round(getStyle( obj, 'opacity' ) * 100); } else { iCur = parseInt(getStyle(obj, attr)); } if (iCur != iTarget) { iBtn = false; if (attr == 'opacity') { obj.style.opacity = (iCur + iSpeed) / 100; obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')'; } else { obj.style[attr] = iCur + iSpeed + 'px'; } } } if (iBtn) { clearInterval(obj.iTimer); fn && fn.call(obj); //如果回调函数存在再执行，call方向为了修正this的指向，之前关于this文章有讲过这个用法。 } }, 30); } function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } }

写着写着，才发现运动的东西认真讲起来还是很多的，只靠文字也不容易讲清楚，下篇再继续写js缓冲运动，碰撞运动，弹性等，由于时间仓促，可能写的比较乱，欢迎大家来找错。。。。。