代是我按照《用javascript實(shí)現(xiàn)圖片緩慢縮放》這部教程做的,當(dāng)點(diǎn)擊放大按鈕時(shí),(這里用setInterval計(jì)時(shí)器,每20毫秒增加5%),圖片放大30%停一下。這個(gè)已經(jīng)實(shí)現(xiàn)了。問題是:但是圖片會一直放大一直放大,所以我就想加個(gè):當(dāng)超過原圖2倍時(shí)停止增大,并彈出“已經(jīng)達(dá)到極限值”。就是不成功,哪位老師能幫我加上呢?我好對比一下我哪里錯(cuò)了!<!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>
<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?(){//添加放大按鈕點(diǎn)擊事件
maxfun();//放大的函數(shù),內(nèi)容見18行
}
function?maxfun(){
var?endwidth=img.width*1.3;//規(guī)定每次點(diǎn)擊后的最大寬度
var?endheight=img.height*1.3;//規(guī)定每次點(diǎn)擊后的最大高度
var?maxwidth=img.width*2//規(guī)定圖片放大的寬度極限值
var?maxheight=img.height*2//規(guī)定圖片放大的高度極限值
var?maxtimer=setInterval(function(){//設(shè)置定時(shí)器,規(guī)定每次點(diǎn)擊每隔20毫秒長寬各增加5%,當(dāng)圖片增加到30%時(shí)暫時(shí)停止增大
if(img.width<endwidth){//判斷,如果當(dāng)前寬度小于最大寬度,執(zhí)行寬度每20毫秒增加5%
????
????img.width=img.width*1.05;
????img.height=img.height*1.05;
}
else{clearInterval(maxtimer)}//否則,清除定時(shí)器
},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>
就加一個(gè)功能,當(dāng)圖片放大超過2倍時(shí),停止放大。我加了卻不行。也沒有錯(cuò)呀!
Tang小溪
2016-08-10 16:31:31