js实现图片在一个div中点击按钮放大缩小效果

最新推荐文章于 2024-07-19 06:00:00 发布

张小凡vip

最新推荐文章于 2024-07-19 06:00:00 发布

阅读量1.1w

点赞数 13

分类专栏： web web模块积累文章标签： js 图片按钮放大缩小

原文链接：https://blog.csdn.net/meiqi0538/article/details/82431893

版权

web 同时被 2 个专栏收录

142 篇文章 2 订阅

订阅专栏

web模块积累

47 篇文章 1 订阅

订阅专栏

图片放大，缩小也是前端中经常遇到得问题，以下就根据这个需求，做如下示范：

<!DOCTYPE html>
<html>
<head>
	<title>图片放大</title>
</head>
<style type="text/css">
	.main_div{
		margin: 20px auto;
		text-align: center;

	}
	.pic_div{
		position: relative;
		background-color: pink;
		border: 1px dotted red;
		margin: 10px auto;
		width: 800px;
		height: 600px;
	}
	img{
		width: 600px;
		height: 400px;
	}

</style>
<script type="text/javascript">
	function bigit(){
		var image=document.getElementsByClassName("pic")[0];
		image.style.height=image.height*1.1+'px';
		image.style.width=image.width*1.1+'px';
	}
	function littleit(){
		var image=document.getElementsByClassName("pic")[0];
		image.style.height=image.height/1.1+'px';
		image.style.width=image.width/1.1+'px';
	}
</script>
<body>
	<div  style="" class="main_div">
		<p>图片在一个区域里放大缩小</p>
		<button onclick="bigit()">图片放大</button>&nbsp;&nbsp;<button onclick="littleit()">图片缩小</button>
		<div class="pic_div">
			<img src="bgcc.jpg" class="pic">
		</div>
	</div>

</body>
</html>

效果展示：
在这里插入图片描述