加了提示后alert('已经放大到最大值了');就关不掉了,这是为什么呢?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.8.1.min.js" ></script>
<style type="text/css">
.box{
width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<img src="1.jpg" id="myimage"><br />
<input type="button" value="放大" id="max" />
<input type="button" value="缩小" id="min" />
</div>
<script type="text/javascript">
/**/
window.onload =function(){
//1、给放大按钮加点击事件
var maxbtn =document.getElementById('max');
var img =document.getElementById('myimage');
//定义高宽放大的极限值为图片2倍
var maxWidth =img.width*2;
var maxHeight =img.height*2;
maxbtn.onclick = function(){
maxfun();
}
//2、定义放大函数:a、用定时器;b、找到图片id;c、图片20毫秒增加5%;d、再加if判断;
function maxfun(){
var endwidth = img.width*1.3;//每次点击后的宽度
var endheight =img.height*1.3;//每次点击后的高度
var maxtime = setInterval(function(){
if(img.width<endwidth){
if(img.width<maxWidth){
img.width = img.width*1.05;
img.height = img.height*1.05;
}else{
alert('已经放大到最大值了');
clearInterval(maxfun);
}
}else{
clearInterval(maxfun);
}
},20);
}
}
</script>
</body>
</html>