js中的运动框架（缓冲运动）

window.onload = function() {
	
	var oDiv1 = document.getElementById('div1');
	
	oDiv1.onclick = function() {
		
		/*startMove(this, {
			width : 200
		}, function() {
			startMove(this, {
				height : 200
			});
		});*/
		
		startMove(this, {
			width : 200,
			height : 200
		});
	}
	
	function startMove(obj, json, fn) {
		clearInterval(obj.iTimer);
		var iCur = 0;
		var iSpeed = 0;
			
		obj.iTimer = setInterval(function() {
			
			var iBtn = true;
						
			for ( var attr in json ) {
								
				var iTarget = json[attr];
				
				if (attr == 'opacity') {
					iCur = Math.round(css( obj, 'opacity' ) * 100);
				} else {
					iCur = parseInt(css(obj, attr));
				}
				
				iSpeed = ( iTarget - iCur ) / 8;
				iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
				
				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);
			}
			
		}, 30);
	}
	
	function css(obj, attr) {
		if (obj.currentStyle) {
			return obj.currentStyle[attr];
		} else {
			return getComputedStyle(obj, false)[attr];
		}
	}
	
}
</script>