图片放大、缩小-CSDN博客

本文链接：https://blog.csdn.net/ylh__990925/article/details/118517205

用一张图片实现放大缩小的效果

实现：点击图片放大，每点一次放大图片一次，直到满屏点击图片缩小，每点一次缩小图片一次，直到消失

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>图片放大 图片缩小</title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style type="text/css">
			img {
				width: 500;
			}
			
			body {
				width: 98%;
				height: 100%;
			ac	text-align: center;
			}
			
			#nav {
				width: 100%;
				text-align: center;
				position: fixed;
				top: 500px;
			}
		</style>
		<img src="img/dd_scroll_1.jpg" id="imgs" />
		<div id="nav">
			<button onclick="imgBig()">图片放大</button>
			<button onclick="imgSanll()">图片缩小</button>
		</div>

		<script type="text/javascript">
			var wid = 500;

			function imgBig() {
				wid += 100;
				document.getElementById("imgs").width = wid;
				if(wid > 1900) {
					wid = 500;
				}
			}

			function imgSanll() {
				wid -= 100;
				document.getElementById("imgs").width = wid;
				if(wid < 100) {
					wid = 500;
				}
			}
		</script>
	</head>

	<body>
	</body>

</html>