clip施用之简单图片动画

#panel {
	position :relative;
}
#panel img{
	position : absolute;
	top:0px;
	left:0px;
}
 <div id="panel">
 	<img id="img1" src="/img/1.jpg" width="500px" height="332px"/>
 </div>

function init(){
	var img = document.getElementById('img1');
	img.onclick = fn;
}
function fn(){
	var img = document.getElementById('img1');
	var width = parseInt(img.width,10);
	var height = parseInt(img.height,10);
	var imgStyle = img.style;
	var step = 10;

	var t = Math.round(height/2);
	var r = Math.round(width/2);
	var b = t;
	var l = r;
	
	function change(){
			t = t - step;
			r = r + step;
			b = b + step;
			l = l - step;
			if(t < 0){
				t = 0;
			}
			if(r > width)
				r = width;
			if(b > height)
				b = height;
			if(l < 0)
				l = 0;			

			imgStyle.clip = 'rect('+t+ 'px,' + r + 'px,' + b + 'px,' + l+ 'px)';
			
			if(t == 0 && r == width && b == height && l ==0){
				clearInterval(timer);
			}
	}
	var timer = setInterval(change,100);
}