原生JS手风琴仿JQ动画

使用定时器制作手风琴

写这个过程遇到的难点：

　　1、每次调用函数时未清理定时器，导致点击收回时，会停在一半或在路上停住，或点击这个其他的出现效果

　　2、关于动画速度的处理，在用style获取当前元素的高度时，获取的值是带PX的，然后用

parseInt转为数字后会导致计算速度时出现NAN，最后用getComputedStyle解决

案例还可以完善，传属性时还可以传多属性，定时器函数里面就需遍历；

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        #box {
            margin: 50px;

        }

        #box h1 {
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: lightblue;
            cursor: pointer;
            font-size: 24px;
            font-weight: lighter;
            border: 1px solid #000;
        }

        #box .con {
            width: 120px;
            height: auto;
        }

        #box ul {
            height: 0;
            overflow: hidden;
            transition: all .5s;
        }

        #box ul li {
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: lightcyan;
        }
    </style>

</head>

<body>
    <div id="box">
        <div class="con">
            <h1>体育</h1>
            <ul>
                <li>体育1</li>
                <li>体育2</li>
                <li>体育3</li>
            </ul>
        </div>
        <div class="con">
            <h1>新闻</h1>
            <ul>
                <li>新闻1</li>
                <li>新闻2</li>
                <li>新闻3</li>
            </ul>
        </div>
        <div class="con">
            <h1>娱乐</h1>
            <ul>
                <li>娱乐1</li>
                <li>娱乐2</li>
                <li>娱乐3</li>
            </ul>
        </div>
    </div>
</body>

View Code

<script>
    (function () {
　　　　//获取手风琴一级导航节点
        var con = document.getElementsByClassName('con');
　　　　//遍历查询是否有按键按下
        for (var i = 0; i < con.length; i++) {
　　　　　　　　//添加自定义属性，用来做开关
            con[i].isok = true;
　　　　　　//按键按下时绑定事件
            con[i].children[0].onclick = function () {
　　　　　　　　　　//为真时打开二级导航
                if (this.parentNode.isok) {
　　　　　　　　　　　　//函数传参二级的最外层节点，和改变的属性属性值
                    openclos(this.parentNode.children[1], {
                        height: 120
                    });
                    this.parentNode.isok = false;
                } else {
                    this.parentNode.isok = true;
                    openclos(this.parentNode.children[1], {
                        height: 0
                    });

                }

            }
        }

        function openclos(ele, opt) {
　　　　　　//防止定时器叠加
            clearInterval(ele.timer)
　　　　　　//为每个一级绑定定时器
            ele.timer = setInterval(function () {
　　　　　　　　　　//初始值为零
                var cur = 0;
　　　　　　　　　　//当前高度
                cur = parseInt(css(ele, 'height'));
　　　　　　　　　　//运动速度，目标高度-当前高度/4，在收回时值目标高度为0，速度为负数
                var speed = (opt.height - cur) / 4;
　　　　　　　　　　//取整
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
　　　　　　　　　　//判断是否到临界值
                if (cur == opt.height) {
                    clearInterval(ele.timer);
                }
　　　　　　　　　　//当前高度加上速度，收回时为负数，达到高度减少的效果
                ele.style.height = speed + cur + 'px';
            }, 30);
        }
    })();
</script>

原生JS手风琴仿JQ动画

猜你喜欢