html 图片在一个div中放大缩小效果

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


<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>  <button onclick="littleit()">图片缩小button>
		<div class="pic_div">
			<img src="bgcc.jpg" class="pic">
		div>
	div>

body>
html>

效果展示:

你可能感兴趣的:(前端)