zoukankan      html  css  js  c++  java
  • 二级分类JS实现,伸缩重叠效果

    二级分类JS实现,伸缩重叠效果,效果图展示如下:
    以下代码如下:
    <script   type="text/javascript">
    var mh = 30;//最小高度
    var step = 10;//每次变化的px量
    var ms = 10;//每隔多久循环一次
    function   toggle(o,n){
    var max  = n;//最大高度
        if   (!o.tid)o.tid   =   "_"   +   Math.random()   *   100;      
        if   (!window.toggler)window.toggler   =   {};      
        if   (!window.toggler[o.tid]){      
            window.toggler[o.tid]={
                obj:o,      
                maxHeight:n,
                minHeight:mh,      
                timer:null,      
                action:-1
            };
        }     
        o.style.height   =   o.offsetHeight   +   "px";      
        if   (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);      
        window.toggler[o.tid].action   *=   -1;      
        window.toggler[o.tid].timer   =   setTimeout("anim('"+o.tid+"')",ms   );      
    }      
    function   anim(id){      
        var   t   =   window.toggler[id];      
        var   o   =   window.toggler[id].obj;      
        if   (t.action   <   0){      
            if   (o.offsetHeight<=t.minHeight){      
                clearTimeout(t.timer);      
                return;      
            }      
        }
        else{      
            if(o.offsetHeight>=t.maxHeight){      
                clearTimeout(t.timer);      
                return;      
            }      
        }
        o.style.height   =   (parseInt(o.style.height,   10)   +   t.action   *   step)   +   "px";      
        window.toggler[id].timer   =   setTimeout("anim('"+id+"')",ms   );      
    }      
    </script>
    <style   type="text/css">
    .xx{border:solid 1px;overflow:hidden;height:30px;}      
    .xx h5{padding:2;margin:0;height:30px;background:#f2f2f2;cursor:pointer;}      
    </style>
    <div class="xx"><h5 onclick="toggle(this.parentNode,150)//最大高度手工定义">分类1</h5>
    分类01<br>分类02<br>03<br>4<br>5<br>6<br>7<br>8<br>9<br>0
    </div>
    <div class="xx"><h5 onclick="toggle(this.parentNode,200)">分类2</h5>
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0
    </div>
    <div class="xx"><h5 onclick="toggle(this.parentNode,100)">分类3</h5>
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0
    </div>
  • 相关阅读:
    br-lan、eth0、eth1及lo (转)
    openwrt MT7628 编译前更改为DHCP,root 密码、ssid、时区、主机名
    Openwrt Uboot烧写
    区块链公链“三元悖论”专题之可扩展性(Scalability)
    物联网开发|如何选择一款适合你的物联网操作系统?
    oracle 处理Session不够用
    Redis 数据总结 (2.命令实现逻辑)
    Redis 数据总结(1 数据导入)
    Redis 数据库使用和搭建
    MySql 存储大量长字节 Text报错处理办法
  • 原文地址:https://www.cnblogs.com/sheevy/p/2079809.html
Copyright © 2011-2022 走看看