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

曾经终败给现在 2022-05-29 07:10 284阅读 0赞

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

因为弹性下拉菜单和弹性碰撞下拉菜单，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>

发表评论取消回复

表情：

评论列表（有 0 条评论，284人围观）

还没有评论，来说两句吧...

相关阅读

相关 jq实现二级菜单/下拉菜单

[https://www.cnblogs.com/sandraryan/][https_www.cnblogs.com_sandraryan] 不是很难，直接上代码~ 有写

女爷i/ 2023年06月05日 08:08/ 0 赞/ 25 阅读

相关下拉菜单

![在这里插入图片描述][20200614163018558.gif] <!DOCTYPE html> <html lang="en"> <head> <meta c

ゝ一世哀愁。/ 2023年02月17日 14:30/ 0 赞/ 243 阅读

相关 js实现下拉菜单

效果：平时在网页上经常会看到导航栏在鼠标经过时，字体颜色和背景会改变，然后会显示下拉菜单。原理：js实现在鼠标经过时，改变字体的颜色和背景，然后下拉菜单显示。一般情况下，

客官°小女子只卖身不卖艺/ 2022年08月23日 05:45/ 0 赞/ 237 阅读

相关下拉菜单

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;

港控/mmm°/ 2022年06月18日 10:51/ 0 赞/ 359 阅读

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

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

曾经终败给现在/ 2022年05月29日 07:10/ 0 赞/ 285 阅读

相关下拉菜单的实现

CSS实现下拉菜单： <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

落日映苍穹つ/ 2021年12月16日 08:53/ 0 赞/ 421 阅读

相关【下拉菜单】随前一个下拉菜单内容变化而变化的下拉菜单

`` <body> <form id="form1" runat="server" method="post"> <!--省份下拉菜单

淡淡的烟草味﹌/ 2021年09月26日 00:42/ 0 赞/ 499 阅读

相关 css下拉菜单

基本下拉菜单当鼠标移动到指定元素上时，会出现下拉菜单。 .dropdown \{ position: relative; display:

Love The Way You Lie/ 2021年09月15日 06:24/ 0 赞/ 494 阅读

相关 Vue.js--下拉菜单组件

效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

冷不防/ 2021年08月13日 18:35/ 0 赞/ 420 阅读

相关 js实现简单的下拉菜单

转自:[慕课网][Link 1]。效果图如下: ![20151216115120414][] 代码如下: <!DOCTYPE html PUBLIC "

青旅半醒/ 2021年06月10日 20:41/ 0 赞/ 584 阅读