20150620图片点击变大
html========== <div id="small"> <img id='pic' src="images/small.jpg"/> </div> css=========== #small{width: 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里面图片的路径即可