实现图片中心缩放

最新推荐文章于 2024-06-25 21:54:54 发布

lloyvhe

最新推荐文章于 2024-06-25 21:54:54 发布

阅读量6.3k

点赞数 2

分类专栏： web前端文章标签： javascript css3 图片

本文链接：https://blog.csdn.net/lloyvhe/article/details/49822343

版权

web前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

首先什么是中心缩放呢？相信大家都明白，就是以中心为原点放大图片。。。（感觉跟没说一样不过大家肯定都明白）

首先说一下用css3实现的方式：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	body{
		background-color: #D3C7C7;
	}
	div{
		width:300px;
		height:350px;
		margin:100px auto;	
	}
	img{
		cursor:pointer;
		width:300px;
		height:300px;
		-webkit-transform: scale(1.00); 
		transition:all 1s ease-out 0s;
	}
	img:hover{
		-webkit-transform: scale(1.50); 
		transition:all 1s ease-out 0s;
	}
	</style>
</head>
<body>
<div><img id="img" src="1 (3)/p1.jpg"/>
</div>
</body>
</html>

利用 transform属性 scale放大缩小，可以使用transition实现过渡效果，使变大变小不会特别突兀

然后是JavaScript方式：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	body{
		background-color: #D3C7C7;
	}
	div{
		width:300px;
		height:350px;
		margin:100px auto;	
	}
	img{
		cursor:pointer;
		width:300px;
		height:300px;
		
	}
</style>
</head>
<body>
<div><img id="img" src="1 (3)/p1.jpg"/>
</div>
<script type="text/javascript">
 var img = document.getElementById('img'); 
 img.οnmοuseοver=bigger;
 img.οnmοuseοut=smaller;
 function bigger(){
 img.style.width = '400px'; 
 img.style.height = '400px';
 img.style.marginTop = "-50px"; 
 img.style.marginLeft = "-50px"; 
 } 
 function smaller(){ 
 img.style.width = '300px'; 
 img.style.height = '300px'; 
 img.style.marginTop = "0px";
 img.style.marginLeft = "0px"; 
}
</script>
</body>
</html>

在JavaScript实现的方法中，需要用到margin-top和margin-left这两个属性

说到margin就一定要说到盒模型，上图！

如果我们不给变大的时候加上margiin-top：-50px margin-left：-50px，那么图片就会以左上角为基点，放大或缩小图片的宽高，即

上个图来说明一下margin-top：-50px和margin-left：-50px是什么效果

所以当我们放大图片的宽高时，图片会向右下拉伸，想要实现中心放大，就需要我们把图片往回拽，即设置margin-left和margin-top为负值，当然这两个值要相同才能拽的正，否则就拽偏啦~~就不是中心缩放了哦！！

lloyvhe

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
实现图片中心缩放

首先什么是中心缩放呢？相信大家都明白，就是以中心为原点放大图片。。。（感觉跟没说一样不过大家肯定都明白）首先说一下用css3实现的方式： body{ background-color: #D3C7C7; } div{ width:300px; height:350px; margin:100px auto; } img{ cursor:point
复制链接

扫一扫