zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    1074. Reversing Linked List (25)
    1056. Mice and Rice (25)
    1051. Pop Sequence (25)
    1001. A+B Format (20)
    1048. 数字加密(20)
    1073. Scientific Notation (20)
    1061. Dating (20)
    1009. 说反话 (20)
    MyBatis学习总结(8)——Mybatis3.x与Spring4.x整合
    MyBatis学习总结(8)——Mybatis3.x与Spring4.x整合
  • 原文地址:https://www.cnblogs.com/joyco773/p/5705411.html
Copyright © 2011-2022 走看看