clip属性使用小Demo

最新推荐文章于 2024-01-22 18:01:41 发布

Dylan_洋

最新推荐文章于 2024-01-22 18:01:41 发布

阅读量386

点赞数 2

本文链接：https://blog.csdn.net/qq_35960760/article/details/55261519

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				position: absolute;
				display: block;
				left: 50%;
				top: 50%;
				margin-left: -165px;
				margin-top: -110px;
				/*clip: rect(0px,50px,200px,0px);*/
			}
			body{
				padding-top: 200px;
			}
		</style>
	</head>
	<body>
		<img src="4.jpg" alt="" />
	</body>
	<script type="text/javascript">
		var img=document.getElementsByTagName("img")[0],p=20
		
		img.οnclick=function(){
//			img.style.width=0
			var a=setInterval(function(){
				img.style.clip="rect(0,"+p+"px,220px,auto)"
			    p++
			    if(p==330){
			    	p=20
//			    	clearInterval(a)

			    }
			},10)
			
			console.log(p)
		}
	</script>
</html>