代是我按照《用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>
添加回答
举报
0/150
提交
取消