原生JS带动画手风琴下拉

最新推荐文章于 2024-07-19 08:43:05 发布

_Delete

最新推荐文章于 2024-07-19 08:43:05 发布

阅读量1.1k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/hao452378531/article/details/51384774

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JS代码：

hao_nav = {
    NumDown:0,// 该值为点击获取的值
    NumUp:null,// 该值为上次点击的值
    NumSame:null,// //该值为点击时该容器高度等于传就来的值
    timerDown:null,// 向下滑动定时器
    timerUp:null,//  向上滑动定时器
    timerSame:null,// 当点击时该容器高度等于传就来的高度时触发的定时器
    containerH:0,//初始化容器高度
    isFirst:true,//是否第一次点击
    on:true,//开关
    minH:null,//此为最小高度
    maxH:null,//此为最大高度
    classOn:null,//样式
    json:null,
    speed:null,//速度
    init:function(obj){
        this.json = {};
        for(var i in obj) {
            this.json[i] = obj[i];
        }
        this.minH = parseInt(this.json.minH);
        this.maxH = parseInt(this.json.maxH);
        this.classOn = this.json.classOn;
        this.speed = parseInt(this.json.speed);
//console.log(typeof (this.speed))

        this.oNav = document.getElementById(this.json.id);
        this.aSel = this.oNav.getElementsByTagName(this.json.btn);
        for(var i=0; i<this.aSel.length; i++){
            this.aSel[i].index = i;
            this.aSel[i].onclick = function(){
                hao_nav.NumDown = this.index;
//                console.log(this.NumDown)
                hao_nav.containerH  = hao_nav.oNav.children[hao_nav.NumDown].offsetHeight;
               // conaolw.lof
                if(hao_nav.on==false){return false}//阻止定时器在运行中手贱的点击按钮二次触发
                hao_nav.on=false;
                if(hao_nav.isFirst&&hao_nav.containerH==hao_nav.minH){
                    hao_nav.NumUp=0;
                    hao_nav.isFirst=false;
                }if(hao_nav.containerH==hao_nav.maxH){
                    hao_nav.aSel[hao_nav.NumDown].className = '';
                    hao_nav.NumUp=null;
                    hao_nav.isFirst=false;
                    hao_nav.NumSame=hao_nav.NumDown;
//                    console.log(hao_nav.NumSame)
                    hao_nav.containerSame();
                    return ;
                }
//console.log(1)
                hao_nav.containerUp();
                hao_nav.containerDown();
            }
        }
    },
    containerDown:function(){ //向下滑动
//        console.log(this.NumDown)
        for(var z=0; z<hao_nav.aSel.length; z++){
            hao_nav.aSel[z].className = '';
        }
        hao_nav.aSel[hao_nav.NumDown].className = this.classOn;
        k=this.minH;
        this.timerDown = setInterval(function(){
            k+=hao_nav.speed;

            if(k>=hao_nav.maxH){
                k=hao_nav.maxH;
                hao_nav.NumUp=hao_nav.NumDown;
                hao_nav.on=true;
                clearInterval(hao_nav.timerDown);
            }
            hao_nav.oNav.children[hao_nav.NumDown].style.height = k+'px';
        },1);
    },
    containerUp:function(){ //向上滑动
//        console.log(this.NumUp)
        if(this.NumUp!=null){
            t=this.maxH;
            this.timerUp = setInterval(function(){
                t-=hao_nav.speed;
                if(t<=hao_nav.minH){
                    t=hao_nav.minH;
                    hao_nav.on=true;
                    clearInterval(hao_nav.timerUp);
                }
                hao_nav.oNav.children[hao_nav.NumUp].style.height = t+'px';
            },1);
        }
    },
    containerSame:function(){ //当高度相等时执行的向上滑动;
//        console.log(this.NumSame)
        l=this.maxH;
        this.timerSame = setInterval(function(){
            l-=hao_nav.speed;
            if(l<=hao_nav.minH){
                l=hao_nav.minH;
                hao_nav.on=true;
                clearInterval(hao_nav.timerSame);
            }
            hao_nav.oNav.children[hao_nav.NumSame].style.height = l+'px';
        },1);
    }
}

HTML代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0; padding: 0;}
        .nav{width: 900px; height: 300px; margin: 0 auto; background: #000000; overflow: hidden;}
        .nav div{width: 900px; height: 240px; overflow: hidden;}
        .nav .a{background: #ff0000;height: 240px;}
        .nav .b{background: #0061ba;height: 30px;}
        .nav .c{background: #dbc295; height: 30px;}
        .nav a{width: 900px; height: 30px; display: block; text-align: center; color: #FFFFFF; line-height: 30px; }
        .nav .on{background: #29799c;}
    </style>
</head>
<body>
<div class="nav" id="Nav">
    <div class="a"><a class="on" href="javascript:;">点击按钮</a></div>
    <div class="b"><a href="javascript:;">点击按钮</a></div>
    <div class="c"><a href="javascript:;">点击按钮</a></div>
</div>
<script src="js/hao_nav.js"></script>
<script>
    hao_nav.init({
        id:'Nav', //容器的ID
        btn:'a', //点击的按钮
        minH:30, //子容器缩小的最小值
        maxH:240, //子容器的最大值不能大于总容器的高度
        classOn:'on', //点击按钮样式的变化--可为空
        speed:5 //速度
    })
</script>
</body>
</html>

这是自己写的小组件，有不足的地方可以提出。一起交流,共同学习