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);}