就加一个功能，当图片放大超过2倍时，停止放大。我加了却不行。也没有错呀！

代是我按照《用javascript实现图片缓慢缩放》这部教程做的，当点击放大按钮时，（这里用setInterval计时器，每20毫秒增加5%），图片放大30%停一下。这个已经实现了。
问题是：
但是图片会一直放大一直放大，所以我就想加个：当超过原图2倍时停止增大，并弹出“已经达到极限值”。
就是不成功，哪位老师能帮我加上呢？我好对比一下我哪里错了！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
body{text-align:center;}
</style>
<script>
window.onload=function (){
	var img=document.getElementById('myimage');//获取图片的id
	var maxbtn=document.getElementById('max');//获取放大按钮id
	var minbtn=document.getElementById('min');//获取缩小按钮id
	maxbtn.onclick=function (){//添加放大按钮点击事件
		maxfun();//放大的函数,内容见18行
		}
	function maxfun(){
		var endwidth=img.width*1.3;//规定每次点击后的最大宽度
		var endheight=img.height*1.3;//规定每次点击后的最大高度
		var maxwidth=img.width*2//规定图片放大的宽度极限值
		var maxheight=img.height*2//规定图片放大的高度极限值
		
		var maxtimer=setInterval(function(){//设置定时器，规定每次点击每隔20毫秒长宽各增加5%,当图片增加到30%时暂时停止增大
		if(img.width<endwidth){//判断，如果当前宽度小于最大宽度，执行宽度每20毫秒增加5%
		    		
		    img.width=img.width*1.05;
		    img.height=img.height*1.05;
					
			}
		else{clearInterval(maxtimer)}//否则，清除定时器
		},20)
		}
	}
</script>
</head>

<body>

<img src="IMG_20160607_101105.jpg" id="myimage" /><br/>
<input type="button" value="放大" id="max" />
<input type="button" value="缩小" id="min" />
</div>
</body>
</html>

Tang小溪

浏览 1700回答 2

2回答

随时随地看视频慕课网APP