• 二级分类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>
  • 相关阅读:
    迭代器生成器
    elasticsearch系列(五)score
    数据结构(五)串
    数据结构系列(四)栈与队列
    数据结构系列(三)线性表
    数据结构系列(二)算法
    数据结构系列(一)入门
    elasticsearch系列(四)部署
    SpringBoot系列(一)RestTemplate
    基于python的爬虫(一)
  • 原文地址:https://www.cnblogs.com/sheevy/p/2079809.html
Copyright © 2020-2023  润新知