<!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>無標(biāo)題文檔</title>
</head>
<body>
<div?style="width:400px;margin:0?auto">
????<img?src="http://img1.sycdn.imooc.com//53577ee900016c2102080260.jpg"?id="myImage"??/><br?/>
????<input?type="button"?id="max"?value="放大"??/>
????<input?type="button"?id="min"?value="縮小"??/>
</div>
<script>
????window.onload?=?function(){
var?maxBtn?=?document.getElementById("max");
maxBtn.onclick?=?function(){//添加放大點(diǎn)擊事件
maxFun();//放大函數(shù)
}
var?img?=?document.getElementById("myImage");
var?maxWidth?=?img.width*3;//放大寬度的極限值
var?maxHeight?=?img.height*3;//放大的高度極限值
//定義放大函數(shù)
function?maxFun(){
????var?endWidth=img.width*1.3;
????????????//每次點(diǎn)擊后的寬度
????var?endHeight=img.height*1.3;
????????????//每次點(diǎn)擊后的高度
var?maxTimer?=?setInterval(function(){
//判斷圖片寬度或者高度,數(shù)值不能超過1.5倍
if(img.width<endWidth){
??????????????if(img.width<maxWidth){??
?????????????????img.width=img.width*1.05;
?????????????????img.height=img.height*1.05;
}else{
alert("已經(jīng)放大到最大值了");
//終止定時器
? clearInterval(maxTimer);
}
}else{
clearInterval(maxTimer);
}
},10);
}
</script>
</body>
</html>
2016-04-11
找到錯誤了,少了一個}