《js实现图片缓慢缩放的效果》之学习总结

最新推荐文章于 2023-07-28 16:24:17 发布

MMRS

最新推荐文章于 2023-07-28 16:24:17 发布

阅读量1.8k

点赞数

分类专栏：深入js 文章标签： js

本文链接：https://blog.csdn.net/mmrsdym/article/details/40181893

版权

深入js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

学习资源来自慕课网：http://www.imooc.com/learn/80

题述：点击放大，即将图片放大，点击缩小，及缩小图片。此例常应用在如淘宝、京东网站上的图片缩放。

小结：

实现缩放图片的关键点：

1）图片需要用<img>来引用（通过我本人自己的测试，发现图片的宽高不能通过css或内联style来另外设置，不然缩放不起作用。）

2）实现缩放效果采用setInterVal()缓慢缩放

3）宽高要同比例缩放

例如：以同比例5%的速度增大

img.width = img.width*1.05;

img.height = img.height*1.05;

4）图片缩放的限制：

**每次点击时规定缩放的比例

**图片总体缩放到一定程度后，限制不能缩放

5）注意释放定时器clearInterval();

代码练习如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
		.box{
			width:300px;
			margin:0 auto;
			height:auto;
		}
		</style>
		<script type="text/javascript">
		/***
			实现缩放图片的关键点：
			1）图片需要用<img>来引用
			   通过我本人自己的测试，发现图片的宽高不能通过css或内联style来另外设置，不然缩放不起作用。
			2）实现缩放效果采用setInterVal()缓慢缩放
			3）宽高要同比例缩放
			   例如：以同比例5%的速度增大
					 img.width = img.width*1.05;
					 img.height = img.height*1.05;
			4）图片缩放的限制：
			   **每次点击时规定缩放的比例
			   **图片总体缩放到一定程度后，限制不能缩放
			5）注意释放定时器clearInterval();
		***/
			window.onload = function(){
				var big = document.getElementById("big");
				var small = document.getElementById("small");
				big.onclick = function(){
					makeBig();
				};
				small.onclick = function(){
					makeSmall();
				};

				var img = document.getElementById("imgdemo");

				//图片最大限度增加到原来的3倍
				var maxW = img.width*3;  
				var maxH = img.height*3;

				//图片最大限度缩小到原来的0.5倍
				var minW = img.width*0.5;
				var minH = img.height*0.5;


				//图片放大
				function makeBig(){

					//每次点击后的宽高限于同比例增加50%;
					var clickW = img.width*1.5;
					var clickH = img.height*1.5;

					var timer = setInterval(function(){

						if(img.width < clickW){//限定宽高增大的程度到每次点击后的宽高的150%

							if(img.width < maxW){//限定物体能缩放的极限值为maxW

								//以同比例5%的速度增大
								img.width = img.width*1.05;
								img.height = img.height*1.05;
							}else{
								alert("亲，图片已放到最大了");
								clearInterval(timer);
							}
						}else{
							clearInterval(timer);
						}
						
					},10);
				}

				//缩小图片
				function makeSmall(){
					//每次点击后的宽高限于同比例增加50%;
					var clickW = img.width*0.5;
					var clickH = img.height*0.5;

					var timer = setInterval(function(){

						if(img.width > clickW){//限定宽高缩放的程度到每次点击后的宽高的50%

							if(img.width > minW){//限定物体能缩放的极限值为minW

								//以同比例5%的速度减小
								img.width = img.width*0.95;
								img.height = img.height*0.95;
							}else{
								alert("亲，图片已缩到最小了");
								clearInterval(timer);
							}
						}else{
							clearInterval(timer);
						}
						
					},10);
				}
			}
		</script>
	</head>
	<body>
		<div class="box">
			<img src="default.jpeg" id="imgdemo"></img>
			<p>
				<input type="button" id="big" value="放大" />
				<input type="button" id="small" value="缩小" />
			</p>
		</div>
	</body>
</html>

效果图：