1 <body>
2 <!--页面布局:一张图片两个按钮-->
3 <div style = "width: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>
时间： 2024-12-16 21:44:50