DIV宽度自动缓慢变化 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <title>宽度缓慢变化</title>
 6         <style>
 7             #chg {
 8                 width: 200px;
 9                 height: 120px;
10                 background-color: #390;
11                 margin: auto;
12             }
13             
14             #btn {
15                 width: 200px;
16                 height: 30px;
17                 background-color: #000;
18                 margin: auto;
19                 display: block;
20                 cursor: pointer;
21                 color: #FFF;
22                 font-size: 12px;
23                 text-align: center;
24                 line-height: 30px;
25                 font-weight: bolder;
26             }
27         </style>
28     </head>
29     <body>
30         <div id="chg"></div><br />
31         <div id="btn" onclick="$d3()">展开</div>
32     </body>
33 </html>
34 <script>
35     function $d1() {
36         var l = document.getElementById("chg");
37         var w = l.offsetWidth;
38         var maxw = 500;
39 
40         function chgws() {
41             w += 1;
42             if(w >= maxw) {
43                 l.style.width = '500px';
44                 clearInterval(iIntervalId);
45             } else {
46                 l.style.width = w + 'px';
47             }
48         }
49         iIntervalId = setInterval(chgws, 10);
50     }
51 
52     function $d2() {
53         var m = document.getElementById("chg");
54         var n = m.offsetWidth;
55         var maxw = 500;
56 
57         function chgwh() {
58             n -= 1;
59             if(n <= 200) {
60                 m.style.width = '200px';
61                 clearInterval(iIntervalId);
62             } else {
63                 m.style.width = n + 'px';
64             }
65         }
66         iIntervalId = setInterval(chgwh, 10);
67     }
68 
69     function $d3() {
70         var q = document.getElementById("chg");
71         var chgb = document.getElementById('btn');
72         if(chgb.innerHTML == "展开") {
73             chgb.innerHTML = "收缩";
74             $d1();
75         } else {
76             chgb.innerHTML = "展开";
77             $d2();
78         }
79     }
80 </script>

 

posted @ 2016-07-25 21:30  神奇的小胖子  阅读(924)  评论(0)    收藏  举报