<div style="width:400px;margin: auto">
<img src="http://img1.sycdn.imooc.com//53577ee900016c2102080260.jpg" id="myImage" style="display: block" />
<input type="button" id="max" value="放大" style="margin-right: 10px" />
<input type="button" id="min" value="縮小" />
<img src="http://img1.sycdn.imooc.com//53577ee900016c2102080260.jpg" id="myImage" style="display: block" />
<input type="button" id="max" value="放大" style="margin-right: 10px" />
<input type="button" id="min" value="縮小" />
老師用的是img.width,
我們可以用img.style.width來做,并且要把img.style.width轉換為數值才能進行數字操作。
轉換方法一:
img.style.width=img.offsetWidth*1.05+"px"; //增加寬度
轉換方法二:
img.style.width=parseInt(img.style.width)*1.05+"px"; //增加寬度
我們可以用img.style.width來做,并且要把img.style.width轉換為數值才能進行數字操作。
轉換方法一:
img.style.width=img.offsetWidth*1.05+"px"; //增加寬度
轉換方法二:
img.style.width=parseInt(img.style.width)*1.05+"px"; //增加寬度
2017-11-30
每次變成1.05倍,增加6次并不是你講的1.3倍好吧。因為1.05都是變成前一次的1.05倍,img.width值每次執行都會更新,也就是1.05^6算出來是1.34......
2017-08-23
老師實現的效果是基于XHTML的,如果在HTML5中,img.width 和 img.height 只能讀?。ㄖ禐閿底诸愋停?,不能寫入,縮放是實現不了的。大家可以用 img.style.width、img.style.cssText、img.style.getPropertyValue(Name)、img.style.setPropertyValue(Name)試試,不過這些屬性方法讀取的值和寫入的值都是“字符串類型”,帶有“...px”單位的。我接下來是把他們都轉換成了數字類型,我感覺挺麻煩的。有沒有大神,有其他的方法?
2017-08-10
如果你給img設置寬高那就不能用img.widht了,需要寫成parseInt(getComputedStyle(img).width),才能獲得img的寬度和高度