JavaScript实战-菜单特效

以下是我自己用原生JS写的各种菜单特效，虽然网上一搜一大堆，但我还是喜欢自己来写一写！
这是上一篇：JavaScript实战（带收放动画效果的导航菜单）
下面是经过优化后的完整代码，优化了CSS样式、简化事件函数、减少HTML层级，删了至少20行以上的冗余代码
如果各位前辈有好的建议，记得一定留下你的宝贵意见！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function() {
            //========伸缩动画菜单
            var ul = document.getElementById('ul');
            if(ul.addEventListener){
                ul.addEventListener('mouseover',listener1,true);
                ul.addEventListener('mouseout',listener2,true);
                ul.addEventListener('click',listener3,false);
            }else if(ul.attachEvent){  //兼容IE8及以前版本
                ul.attachEvent('onmouseover',listener1,false);
                ul.attachEvent('onmouseout',listener2,false);
                ul.attachEvent('onclick',listener3,false);
            }
            function listener1(event){
                //event = event||window.event; //兼容IE8及以前版本
                var target = event.target||event.srcElement; //兼容IE8及以前版本
                if(target.tagName.toLowerCase() === 'li') {
                    var div1 = target.getElementsByTagName('div')[0];
                    div1.style.display = 'block';
                    div1.style.opacity = 1;
                }
            }
            function listener2(event){
                //event = event||window.event;
                var target = event.target||event.srcElement;
                if(target.tagName.toLowerCase() === 'li'){
                    var div1 = target.getElementsByTagName('div')[0];
                    div1.style.display = 'none';
                    div1.style.opacity = 0;
                    div1.onmouseover = function(){
                        div1.style.display = 'block';
                        div1.style.opacity = 1;
                    };
                    div1.onmouseout = function(){
                        div1.style.display = 'none';
                        div1.style.opacity = 0;
                    };
                }
            }
            var bool = true;
            function listener3(event) {
                var event = event || window.event;
                var target = event.target || event.srcElement;
                if (target.className === 'show-hide') {
                    var adiv = target.nextElementSibling;
                    if (window.getComputedStyle(adiv,null).opacity>0.5){bool=false}else{bool=true}
                    var height = 90,
                            changeH,
                            opacity,
                            id;
                    if (bool) {
                        changeH = 0;
                        opacity = 0;
                        var text = target.innerHTML.slice(0,-1);
                        target.innerHTML = text+' -';
                        (function show() {
                            if (changeH > height) {clearTimeout(id);return}
                            changeH += 5;
                            opacity += 0.06;
                            console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height);
                            adiv.style.height = changeH + 'px';
                            adiv.style.opacity = opacity;
                            adiv.style.display = 'block';
                            id = setTimeout(function () {
                                clearTimeout(id);
                                show();
                            }, 16.7);
                        })();
                        bool = false;
                    } else {
                        changeH = height;
                        opacity = 1;
                        var text = target.innerHTML.slice(0,-1);
                        target.innerHTML = text+' +';
                        (function hidden() {
                            if (changeH < 0) {clearTimeout(id);adiv.style.display = 'none';return}
                            changeH -= 10;
                            opacity -= 0.11;
                            console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height);
                            adiv.style.height = changeH + 'px';
                            adiv.style.opacity = opacity;
                            id = setTimeout(function () {
                                clearTimeout(id);
                                hidden();
                            }, 16.7);
                        })();
                        bool = true;
                    }
                }
            }
        };
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a,img{border:0;}
        ul{
            position: absolute;
            top: 20px;
            left: 30px;
            z-index: 100;
        }
        #ul li{
            display: inline-block;
            position: relative;
            height: 30px;
            text-align: center;
            line-height: 30px;
            padding: 3px;
            border: 1px solid gray;
            border-radius: 10px 10px 0 0;
            background-color: aliceblue;
            cursor: pointer;
            -webkit-transition: all ease-in-out 0.3s;
            -moz-transition: all ease-in-out 0.3s;
            -ms-transition: all ease-in-out 0.3s;
            -o-transition: all ease-in-out 0.3s;
            transition: all ease-in-out 0.3s;
        }
        #ul li:hover{background-color: aquamarine;}
        .nav-div{
            position: absolute;
             100%;
            left: -1px;
            top: 37px;
            display: none;
            border: 1px solid gray;
            border-top: 0;
            border-radius:0 0 10px 10px;
            background-color: aliceblue;
        }
        .show-hide{
            position: relative;
            display: block;
            border-radius:0 0 10px 10px;
            background-color: lightblue;
            -webkit-transition: all ease-in-out 0.3s;
            -moz-transition: all ease-in-out 0.3s;
            -ms-transition: all ease-in-out 0.3s;
            -o-transition: all ease-in-out 0.3s;
            transition: all ease-in-out 0.3s;
            border-bottom: 1px solid gray;
        }
        .show-hide:hover{background-color: lavender}
        .a-div{
            background-color: aliceblue;
            display: none;
            border-radius:0 0 10px 10px;
            opacity: 0}
        .a{
            z-index: -1;
            display: block;
            text-decoration: none;
            border-radius:10px;
            -webkit-transition: all ease-in-out 0.3s;
            -moz-transition: all ease-in-out 0.3s;
            -ms-transition: all ease-in-out 0.3s;
            -o-transition: all ease-in-out 0.3s;
            transition: all ease-in-out 0.3s;
        }
        .a:hover{background-color: lavender}
    </style>
</head>
<body>
<ul id="ul">
    <li>JavaScript实战
        <div class="nav-div">
            <span class="show-hide">导航特效 +</span>
            <div class="a-div">
                <a class="a" href="">可收放子菜单</a>
                <a class="a" href="">切换页面</a>
                <a class="a" href="">持续添加中...</a>
            </div>
            <span class="show-hide">其它特效 +</span>
            <div class="a-div">
                <a class="a" href="">持续添加中...</a>
                <a class="a" href="">持续添加中...</a>
                <a class="a" href="">持续添加中...</a>
            </div>
        </div>
    </li>
    <li>JavaScript性能优化
        <div class="nav-div">
            <span class="show-hide">财经 +</span>
            <div class="a-div">
                <a class="a" href="">今日头条</a>
                <a class="a" href="">所有新闻</a>
                <a class="a" href="">往日回看</a>
            </div>
            <span class="show-hide">科技 +</span>
            <div class="a-div">
                <a class="a" href="">今日头条</a>
                <a class="a" href="">所有新闻</a>
                <a class="a" href="">往日回看</a>
            </div>
        </div>
    </li>
    <li>今日新闻
        <div class="nav-div">
            <span class="show-hide">财经 +</span>
            <div class="a-div">
                <a class="a" href="">今日头条</a>
                <a class="a" href="">所有新闻</a>
                <a class="a" href="">往日回看</a>
            </div>
            <span class="show-hide">科技 +</span>
            <div class="a-div">
                <a class="a" href="">今日头条</a>
                <a class="a" href="">所有新闻</a>
                <a class="a" href="">往日回看</a>
            </div>
        </div>
    </li>
</ul>
</body>
</html>

下面是第二个特效：（具体实现比第一个简单很多，主要注意CSS布局）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a,img{border:0;}
        #menu{
            position: absolute;
            top: 30px;
            left: 0;
            right: 0;
            margin: auto;
             400px;
            border-left: 1px solid gray;
            border-top: 1px solid gray;
            background-color: lemonchiffon;
            text-align: center;
        }
        #menu li{
            list-style: none;
            float: left;
             99px;
            height: 30px;
            line-height: 30px;
            border-right: 1px solid gray;
            background-color: burlywood;
            color: white;
            -webkit-transition: all ease-in-out 0.5s;
            -moz-transition: all ease-in-out 0.5s;
            -ms-transition: all ease-in-out 0.5s;
            -o-transition: all ease-in-out 0.5s;
            transition: all ease-in-out 0.5s;
        }
        #menu li:hover{
            background-color: lemonchiffon;
            color: #336699;
        }
        .contain{
            position: absolute;
            left: -1px;
            display: none;
             399px;
            height: 300px;
            color: #336699;
            border-left: 1px solid gray;
            border-right: 1px solid gray;
            border-bottom: 1px solid gray;
            background-color: lemonchiffon;
        }
    </style>
    <script>
        window.onload = function(){
            var menu = document.getElementById('menu');
            if(menu.addEventListener){
                menu.addEventListener('mouseover',show,false);
                menu.addEventListener('mouseout',hide,false);
            }else if(menu.attachEvent){
                menu.attachEvent('onmouseover',show,false);
                menu.attachEvent('onmouseout',hide,false);
            }
            function show(event){
                var target = event.target||event.srcElement;
                if(target.tagName.toLowerCase() === 'li'){
                    target.firstElementChild.style.display = 'block';
                }else if(target.parentNode.tagName.toLowerCase() === 'li'){
                    target.style.display = 'block';
                }
            }
            function hide(event){
                var target = event.target||event.srcElement;
                if(target.tagName.toLowerCase() === 'li'){
                    target.firstElementChild.style.display = 'none';
                }else if(target.parentNode.tagName.toLowerCase() === 'li'){
                    target.style.display = 'none';
                }
            }
        }
    </script>
</head>
<body>
<div id="menu">
    <ul>
        <li id="menu1">苏福的特效1
            <div class="contain">111111111111</div>
        </li>
        <li id="menu2">苏福的特效2
            <div class="contain">222222222222</div>
        </li>
        <li id="menu3">苏福的特效3
            <div class="contain">333333333333</div>
        </li>
        <li id="menu4">苏福的特效4
            <div class="contain">444444444444</div>
        </li>
    </ul>
</div>
</body>
</html>

相关阅读:
print输出带颜色特效的方法
为什么pymysql执行SQL语句后提示成功，但没有实际操作数据库？
Mysql支持的数据类型
基本的SQL语句
初次运行Git前的配置
git安装
Hadoop HA 搭建
Ubuntu下编译 Hadoop2.9
Mac 下编译 Hadoop
Windows下编译 Hadoop

原文地址：https://www.cnblogs.com/susufufu/p/5772523.html