原生JS带动画手风琴下拉

来源：互联网发布：软件测试辛苦吗编辑：程序博客网时间：2024/06/06 17:26

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>

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

0 0