clip应用之简单图片动画

iteye_12132

于 2010-09-06 14:09:42 发布

阅读量118

点赞数

分类专栏： JavaScript 文章标签： HTML

JavaScript 专栏收录该内容

117 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的图片裁剪动画效果的方法。通过逐步改变图片的显示区域来实现动态裁剪效果，包括定义初始样式、注册点击事件处理程序及调整裁剪区域等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


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