20150620图片点击变大

html==========

<div id="small">
    <img id='pic' src="images/small.jpg"/>
</div>

css===========

#small{ 200px;height: 200px;margin:110px auto;position: relative;}
#pic{position: absolute;left: 0;top: 0;}

js============

var small=document.getElementById('small');
var pic=document.getElementById('pic');
pic.onclick=function () {
    act(this,{
        'width':450,
        'height':450,
        'left':-50,
        "top":-50
    })
}
function css(obj, attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}
 function act(obj, json, fn){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var stop = true;
                for(var p in json){
                    var value = json[p];
                    var cur = parseInt(css(obj, p));
                    var speed = (value - cur) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if(cur != value){
                        stop = false;
                        obj.style[p] = cur + speed + 'px';
                    }
                }
                if(stop){
                    clearInterval(obj.timer);
                    obj.timer = null;
                    fn && fn();
                }
            }, 30);
        }

更换html里面图片的路径即可