在這里我們帶領大家來使用javaScript實現圖片的放大和縮小。實現的效果圖如下
點擊放大按鈕，圖片會放大，當放大到一定程度的時候，圖片不能再放大，會彈出一個提示框，不能再放大了，點擊縮小按鈕，圖片會縮小，當縮小到一定程度的時候，圖片不能再縮小，會彈出一個提示框，不能再縮小了。
下面我們先來實現界面的布局。
點擊按鈕圖片進行縮放，可以看出需要將圖片和按鈕放置在一個div里面。
布局代碼如下：
1、實現點擊放大按鈕，圖片放大
實現分為以下幾步：
1.獲取放大按鈕以及圖片
通過getElementById方法獲取放大按鈕以及圖片，然后設置按鈕的點擊事件onclick。
2.實現放大按鈕的onclick事件
在該事件中，需要設置圖片每次點擊后的寬度和高度，設置為該圖片本身寬度和高度的1.2倍，實現代碼如下
var endW=image.width*1.2;//每次點擊后的寬度
var endW=image.width*1.2;//每次點擊后的高度
這里需要設置定時器，每隔20ms，圖片放大一次，此時需要判斷，如果圖片的寬度小于endW，點擊放大按鈕的時候，圖片寬度和高度每次增大1.05倍否則。但是這樣的話點擊放大按鈕時，圖片會無限制放大。
3.限制圖片放大
設置圖片放大的極限值，分別為圖片寬度和高度的2倍
var maxW=image.width*2;//放大寬度的極限值
var maxH=image.height*2;//放大高度的極限值
在判斷的時候加入當圖片的寬度小于極限值的時候，圖片放大，否則彈出對話框“圖片不能再放大”
2、實現點擊縮小按鈕，圖片縮小
實現原理和放大類似。這里將代碼貼出來，大家可以認真看一下
完整代碼
