图片中心放大-九宫格

html代码如下： 

	
	
	
	
	


	
领哥做网页
	

		

		

		

		

		

		

		

		

		

	

move.js代码如下：

function getStyle(obj,attr){
	if (obj.currentStyle) {
		return obj.currentStyle[attr];
	}else{
		return getComputedStyle(obj,false)[attr];
	}
}
//运动函数
function startMove(obj,json,fn){
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var bStop=true;//判断都到达目标位置
		for(var attr in json){
			//1、取当前值
			var iCur=0;
			if (attr=='opacity') {
				iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
			}else{
				iCur=parseInt(getStyle(obj,attr));
			}
			//2、计算速度
			var iSpeed=(json[attr]-iCur)/8;
			iSpeed=iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

			//3、判断是否到达目标点
			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';
			}	
		}
		if (bStop) {
			clearInterval(obj.timer);
			if (fn) {
				fn();
			}
		}
	},30);
}

成品展示如下：