SOURCE

function scale(){
  startMove(this, 		   	      JSON.parse('{"left":0,"top":0,"width":"100%","height":"100%","z-index":100}'));
}

function reset(left,top){
  this.style.left = left;
  this.style.top = top;
  this.style.width = "50%";
  this.style.height = "50%";
  this.style.zIndex = 0;
}


/*获取样式属性*/
function getStyle(obj, name) {
    if (obj.currentStyle) {
        return obj.currentStyle[name];
    } else {
        return getComputedStyle(obj, null)[name];
    }
}

/*运动函数，参数obj表示运动对象，json可同时传多种属性及相应值，fnEnd表示运动完成后的响应函数，
n为fnEnd函数的参数，其中第1和第2参数为必填，3，4根据需要填写*/
function startMove(obj, json, fnEnd,n)
{
    var MAX=18;
    //每次调用就只有一个定时器在工作(开始运动时关闭已有定时器)
    //并且关闭或者开启都是当前物体的定时器，已防止与页面上其他定时器的冲突，使每个定时器都互不干扰
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var bStop=true; // 假设：所有的值都已经到了
        for(var name in json)
        {
            var iTarget=json[name]; // 目标点
            //处理透明度，不能使用parseInt否则就为0了
            if(name=='opacity')
            {
                // *100 会有误差 0000007 之类的 所以要用 Math.round() 会四舍五入
                var cur=Math.round(parseFloat(getStyle(obj, name))*100);
            }
            else
            {
                var cur=parseInt(getStyle(obj, name)); // cur 当前移动的数值
            }
            var speed=(iTarget-cur)/5; // 物体运动的速度 数字越小动的越慢 /5 : 自定义的数字
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(Math.abs(speed)>MAX)
                speed=speed>0?MAX:-MAX;
            if(name=='opacity')
            {
                obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE
                obj.style.opacity=(cur+speed)/100; //ff chrome
            }
            else
            {
                obj.style[name]=cur+speed+'px';
            }
            // 某个值不等于目标点
            if(cur!=iTarget)
            {
                bStop=false;
            }
        }
        // 都达到了目标点
        if(bStop)
        {
            clearInterval(obj.timer);
            if(fnEnd) //只有传了这个函数才去调用
            {
                if(typeof n === 'undefined')
                  {
                       fnEnd();
                  }
                     else
                     {
                         fnEnd(n);
                     }
            }
        }
    }, 70);
}

<div style="width:300px;height:150px;position:relative;">
  <div onmouseout="reset.call(this,0,0)" onmouseover="scale.call(this)" class="child" style="position:absolute;left:0;top:0;background-color:#ff0000;width:100%;height:50%;"></div>
  <div onmouseout="reset.call(this,'50%',0)" onmouseover="scale.call(this)" class="child" style="position:absolute;left:50%;top:0;background-color:#ffff00;width:50%;height:50%;"></div>
  <div onmouseout="reset.call(this,0,'50%')" onmouseover="scale.call(this)" class="child" style="position:absolute;left:0;top:50%;background-color:#4cad5b;width:50%;height:50%;"></div>
  <div onmouseout="reset.call(this,'50%','50%')" onmouseover="scale.call(this)" class="child" style="position:absolute;left:50%;top:50%;background-color:#69359a;width:50%;height:50%;"></div>
</div>