原生js实现弹性下拉菜单和弹性碰撞下拉菜单

本文链接：https://blog.csdn.net/lhjuejiang/article/details/79616367

弹性下拉菜单和弹性碰撞下拉菜单，其实基本的实现过程是一样的，不同的是，弹性下拉菜单是围绕着目标点上下弹跳直到停止，而弹性碰撞下拉菜单是在目标点上面做弹跳运动直到停止

因为弹性下拉菜单和弹性碰撞下拉菜单，HTML和CSS代码是相同的，所以我就先写HTML和css代码，js代码分开写

HTML代码

<div id="wrap">
    <ul id="ul1">
        <li class="nav"><a href="javascript:;">首页</a></li>
        <li class="nav"><a href="javascript:;">课程</a>
            <ul>
                <li><a href="javascript:;">VIP课程</a></li>
                <li><a href="javascript:;">实体课程</a></li>
                <li><a href="javascript:;">远程课程</a></li>
            </ul>
        </li>
        <li class="nav"><a href="javascript:;">社区讨论</a>
            <ul>
                <li><a href="javascript:;">课上问题</a></li>
                <li><a href="javascript:;">课后问题</a></li>
                <li><a href="javascript:;">前端疑问</a></li>
                <li><a href="javascript:;">问题汇总</a></li>
            </ul>
        </li>
        <li class="nav"><a href="javascript:;">学员作品</a></li>
    </ul>
</div>

CSS代码

    <style>
        *{margin:0; padding:0;}
        li{list-style:none; color:#000;}
        #wrap{width:800px; height:60px; background:#b44861;position:relative; margin:10px auto;}
        #ul1{width:628px; position:absolute; left:86px; top:14px;}
        #ul1 .nav{width:150px; float:left; height:30px; line-height:30px; margin-left:5px; background:#ff9900;border-radius:20% 20%; text-align:center; border:1px solid #0f202f; overflow:hidden;}
        #ul1 .nav a{text-decoration:none; color:#000;}
        #ul1 .nav a:hover{color:#fff;}
    </style>

弹性下拉菜单的JS代码

<script>
    var oUl = document.querySelector('#ul1');
    var aLi = oUl.querySelectorAll('.nav');
    var iTimer = null;
    var iSpeed = 0;
    var iHeight = parseInt(getStyle(aLi[0],'height'));
    for(var i=0; i<aLi.length; i++){
        aLi[i].onmouseover = function() {
            var childLi = this.querySelectorAll('li');
            var len = childLi.length;
                startMove(this, (len + 1) * iHeight);

        }
        aLi[i].onmouseout = function(){
            startMove(this,iHeight);
        }
    }
    function startMove(obj,iTarget){
        clearInterval(obj.iTimer);
        obj.iSpeed = 0;
        obj.iTimer = setInterval(function(){
            obj.iSpeed += (iTarget - parseInt(getStyle(obj,'height')))/6;
            obj.iSpeed *= 0.68;
            if(Math.abs(obj.iSpeed)<1&&Math.abs(iTarget - parseInt(getStyle(obj,'height')))<1){
                clearInterval(iTimer);
                obj.iSpeed = 0;
                obj.style.height = iTarget + 'px';
            }else{
                obj.style.height = parseInt(getStyle(obj,'height')) + obj.iSpeed + 'px';
            }
        },10);
    }
    function getStyle(obj,attr){
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
    }
</script>

弹性碰撞下拉菜单JS代码

<script>

    var oUl = document.querySelector('#ul1');
    var aLi = oUl.querySelectorAll('.nav');
    var iTimer = null;
    var iSpeed = 0;
    var iHeight = parseInt(getStyle(aLi[0],'height'));
    for(var i=0; i<aLi.length; i++){
        aLi[i].onmouseover = function() {
            var childLi = this.querySelectorAll('li');
            var len = childLi.length;
            startMove(this, (len + 1) * iHeight);

        }
        aLi[i].onmouseout = function(){
            startMove(this,iHeight);
        }
    }
    function startMove(obj,iTarget){
        clearInterval(obj.iTimer);
        obj.iSpeed = 0;
        obj.iTimer = setInterval(function(){
            obj.iSpeed +=3;
            obj.style.height = parseInt(getStyle(obj,'height')) + obj.iSpeed + 'px';
           if(parseInt(getStyle(obj,'height'))>iTarget){
               obj.style.height = iTarget+'px';
               obj.iSpeed *=-1;
               obj.iSpeed *=0.65;
           }

        },30);
    }
    function getStyle(obj,attr){
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
    }
</script>