圖片設(shè)置大小了，放大和縮小就無效了？？？
<div class="wrapper">
<img src="./images/1.jpg" id="zoomImage" />
<input type="button" value="放大" id="enlarge" />
<input type="button" value="縮小" id="narrow" />
</div>
.wrapper{
width: 460px;
margin: 0 auto;
}
.wrapper img{
width: 120px; ----------------------------------------設(shè)置了寬高，放大和縮小就無效了????
height: 120px;
}
<script>
window.onload=function(){////頁面加載完畢后觸發(fā)
var zoomImage=getDom('zoomImage'),
maxWidth=zoomImage.width*2,//放大寬度的極限值
maxHeight=zoomImage.height*2,//放大高度的極限值
minWidth=zoomImage.width*0.3,//縮小寬度極限值
minHeight=zoomImage.height*0.3;//縮小高度極限值
/**跨瀏覽器事件處理
* 參數(shù)1:元素id
* 參數(shù)2:綁定類型事件(click keyUp keyDown)
* 參數(shù)3:響應(yīng)的回調(diào)函數(shù)
*/?
var addEvent=function(id,type,handler){
var element=getDom(id)||document;
if(element.addEventListener){//DOM 二級(jí)(非 IE 瀏覽器) 綁定兩個(gè)以上的事件均可拿到(alert(1) alert(2)兩個(gè)均可拿到)
element.addEventListener(type, handler, false);
}else if(element.attachEvent){//低版本瀏覽器(IE9以下)
element.attachEvent('on'+type,handler);
}else{//DOM 零級(jí) 綁定兩個(gè)以上的事件只可拿到最后一個(gè)事件(alert(1) alert(2)只拿到alert(2))
element['on'+type]=handler;//element.onclick === element['onclick']
}
};
addEvent('enlarge','click',function(){//放大
var endWidth=zoomImage.width*1.3,//每次點(diǎn)擊后的寬度
endHeight=zoomImage.height*1.3;//每次點(diǎn)擊后的寬度
var maxTimer=setInterval(function(){
if(zoomImage.width<endWidth){
if(zoomImage.width<maxWidth){
zoomImage.width=zoomImage.width * 1.05;
zoomImage.height=zoomImage.height * 1.05;
}else{
alert('已經(jīng)是最大值了');
clearInterval(maxTimer);
}
}else{
clearInterval(maxTimer)
}
},20)
});
addEvent('narrow','click',function(){//縮小
var endWidth=zoomImage.width*0.7,
endHeight=zoomImage.height*0.7;
var minTimer=setInterval(function(){
if(zoomImage.width>endWidth){
if(zoomImage.width>minWidth){
zoomImage.width=zoomImage.width*0.95;
zoomImage.width=zoomImage.width*0.95;
}else{
alert('已經(jīng)是最小值了！')
clearInterval(minTimer);
}
}else{
clearInterval(minTimer);
}
},20);
});
function getDom(id){
return document.getElementById(id);
}
}
</script>
