用Javascript实现图片的缓慢缩放效果 

 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>

 

posted @ 2015-09-12 22:34  木西梧  阅读(1374)  评论(0)    收藏  举报