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>