1 <body> 2 <!--页面布局:一张图片两个按钮--> 3 <div style = "400px;margin:0 auto"> <!--设置div,目的使图片居中--> 4 <img src = "./wolf.jpg" id="image"/><br/> 5 <input type = "button" id = "max" value = "放大"/> 6 <input type = "button" id = "min" value = "缩小"/> 7 </div> 8 <script> 9 //获取元素,添加点击事件 10 window.onload = function() { 11 var img = document.getElementById("image"); 12 var maxBtn = document.getElementById("max"); 13 var minBtn = document.getElementById("min"); 14 15 var maxWidth = img.width * 2;//定义放大的极限宽度值 16 var minWidth = img.width * 0.5;//定义缩小的极限宽度值 17 18 maxBtn.onclick = function () {//添加放大的点击事件 19 maxFun();//调用放大函数 20 }; 21 22 minBtn.onclick = function(){//添加缩小的点击事件 23 console.log("click minbutton"); 24 minFun();//调用缩小函数 25 }; 26 //定义放大函数 27 function maxFun() { 28 var endWidth = img.width * 1.3;//定义每次点击后放大的宽度 29 var endHeight = img.height * 1.3;//定义每次点击后放大的高度 30 31 var maxTimer = setInterval(function () {//设置定时器 32 if (img.width < endWidth) {//判断点击结束后的图片宽度是否小于每次点击的最大宽度 33 if (img.width < maxWidth) {//判断点击结束后的图片宽度是否小于放大的极限宽度 34 img.width = img.width * 1.05;//每次点击的宽度放大幅度 35 img.height = img.height * 1.05;//每次点击的高度放大幅度 36 } else { 37 alert("已经放大到最大值"); 38 clearInterval(maxTimer); 39 } 40 } else { 41 clearInterval(maxTimer); 42 } 43 }, 10); 44 } 45 //定义缩小函数 46 function minFun(){ 47 var endWidth = img.width * 0.7;//定义每次点击后缩小的宽度 48 var endHeight = img.height * 0.7;//定义每次点击后缩小的高度 49 var minTimer = setInterval(function(){ 50 if(img.width > endWidth){//判断点击结束后的图片宽度是否大于每次点击的最小宽度 51 if(img.width > minWidth){//判断点击结束后的图片宽度是否大于缩小的极限宽度 52 img.width = img.width * 0.95;//每次点击的宽度缩小幅度 53 img.height = img.height * 0.95;//每次点击的高度缩小幅度 54 console.log("img.height = img.height * 0.95;"); 55 }else{ 56 alert("已经缩小到最小值"); 57 clearInterval(minTimer); 58 console.log("clear Interval"); 59 } 60 }else{ 61 clearInterval(minTimer); 62 } 63 },10); 64 } 65 } 66 67 </script> 68 </body>