发新贴  快速回复

JS8-函数返回值、定时器基础-延时消失的菜单

萌萌哒(*^_^*)
2017-08-20 16:50

萌萌哒(*^_^*)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../miaov.js"></script>
        <style>
            ul {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style: none;
            }
            
            #box {
                width: 625px;
                height: 100px;
                margin: 0 auto;
                position:relative;
            }
            
            #title {
                width: 625px;
                height: 45px;
                background: url(img/bg.jpg) no-repeat;
                border-radius: 6px;
                position: relative;
            }
            
            #title ul {
                position: absolute;
                width: 420px;
                height: 30px;
                top: 7px;
                left: 21px;
            }
            
            ul span {
                color: white;
                font: 16px/30px "微软雅黑";
                padding: 4px 25px 6px 25px;
                border-radius: 8px;
                margin-right: 8px;
                cursor: pointer;
            }
            
            .bg {
                background: url(img/font-bg.jpg) repeat-x;
            }
            
            #list {
                width: 100%;
                height: 38px;
                margin-left: 5px;
                margin-top: 6px;
            }
            ul li {
                color: #3c6ea8;
                font: 14px/14px arial;
                float: left;
                margin-right: 20px;
                cursor: pointer;
            }
            ul li:hover{
                text-decoration: underline;
            }
            #list ul {
                width: 100%;
                height: 14px;
                position: absolute;
                top: 14px;
                left: 29px;
            }
            #first{
                width: 334px;
                height: 38px;
                position: relative;
                background: url(img/list1.jpg) no-repeat;
                display: none;
            }
            #second {
                width: 351px;
                height: 38px;
                position: relative;
                background: url(img/list2.jpg) no-repeat;
                left: 94px;
                display: none;
            }        
            #third {
                width: 316px;
                height: 38px;
                position: relative;
                background: url(img/list3.jpg) no-repeat;
                left: 101px;
                display: none;
            }        
            #third li {
                margin-right: 16px;
            }
            #forth {
                width: 411px;
                height: 38px;
                position: relative;
                background: url(img/list4.jpg) no-repeat;
                display: none;
                left: 195px;
            }
            #forth li {
                margin-right: 18px;
            }
            #more{
                font-size: 16px;
                color: white;
                cursor: pointer;
                position: absolute;
                right: 26px;
                top: 10px;
            }
        </style>
        <script>
            $(function() {
                var aSpan = $('title').getElementsByTagName('span');
                var aDiv=$('list').getElementsByTagName('div');
                var timer = null;
                var seter=null;
                for(var i = 0; i < aSpan.length; i++) {
                    aSpan[i].index = i;
                    //鼠标移入标题
                    aSpan[i].err= = hide;
                    aSpan[i].err==show;
                    function show() {
                        //标题颜色,先隐藏,后显示
                        clearTimeout(timer);
                        for(var i = 0; i < aSpan.length; i++) {
                            aSpan[i].className = '';
                        }
                        this.className = 'bg';
                        //列表显示,先隐藏,后显示
                        for(var i = 0; i < aDiv.length; i++) {
                            aDiv[i].style.display = 'none';
                        }
                        aDiv[this.index].style.display='inline-block';
                        
                    }    
                
                }
                for(var i = 0; i < aDiv.length; i++) {
                        aDiv[i].index=i;
                        aDiv[i].err==function(){
                            clearTimeout(timer);
                            clearTimeout(seter);
                            this.style.display='inline-block';
                        }
                        aDiv[i].err==function(){
                            seter=setTimeout(function(){
                                for(var i = 0; i < aSpan.length; i++) {
                                aSpan[i].className = '';
                                }
                                    aSpan[0].className = 'bg';
                                for(var i = 0; i < aDiv.length; i++) {
                                    aDiv[i].style.display = 'none';
                                }
                            },1000)
                        }
                }
                
                
                
                function hide() {
                        timer = setTimeout(function() {
                            for(var i = 0; i < aSpan.length; i++) {
                                aSpan[i].className = '';
                            }
                             for(var i = 0; i < aDiv.length; i++) {
                                    aDiv[i].style.display = 'none';
                            }
                            aSpan[0].className = 'bg';
                        }, 1000)
                    }
            
                

            

            })
        </script>
    </head>

    <body>
        <div id="box">
            <div id="title">
                <ul>
                    <span class="bg">首页</span>
                    <span>关于我们</span>
                    <span>作品</span>
                    <span>博客</span>
                </ul>
            </div>
            <div id="list">
                <div id="first">
                    <ul>
                        <li>最近更新</li>
                        <li>活动</li>
                        <li>报名试听</li>
                        <li>学员反馈</li>
                    </ul>
                </div>
                <div id="second">
                    <ul>
                        <li>秒味讲师</li>
                        <li>培训方式</li>
                        <li>培训理念</li>
                        <li>联系我们</li>
                    </ul>
                </div>
                <div id="third">
                    <ul>
                        <li>般固</li>
                        <li>MATRIX</li>
                        <li>留学e网</li>
                        <li>ECMall</li>
                    </ul>
                </div>
                <div id="forth">
                    <ul>
                        <li>JS教程</li>
                        <li>弹出层效果</li>
                        <li>3D球面标签云</li>
                        <li>window云计算</li>
                    </ul>
                </div>
            </div>
            <div id="more"><<更多</div>
            
        </div>
    </body>

</html>

2017-08-20 16:50  回复本帖
萌萌哒(*^_^*)

修改版,把重复的整理一下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../miaov.js"></script>
        <style>
            ul {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style: none;
            }
            
            #box {
                width: 625px;
                height: 100px;
                margin: 0 auto;
                position: relative;
            }
            
            #title {
                width: 625px;
                height: 45px;
                background: url(img/bg.jpg) no-repeat;
                border-radius: 6px;
                position: relative;
            }
            
            #title ul {
                position: absolute;
                width: 420px;
                height: 30px;
                top: 7px;
                left: 21px;
            }
            
            ul span {
                color: white;
                font: 16px/30px "微软雅黑";
                padding: 4px 25px 6px 25px;
                border-radius: 8px;
                margin-right: 8px;
                cursor: pointer;
            }
            
            .bg {
                background: url(img/font-bg.jpg) repeat-x;
            }
            
            #list {
                width: 100%;
                height: 38px;
                margin-left: 5px;
                margin-top: 6px;
            }
            
            ul li {
                color: #3c6ea8;
                font: 14px/14px arial;
                float: left;
                margin-right: 20px;
                cursor: pointer;
            }
            
            ul li:hover {
                text-decoration: underline;
            }
            
            #list ul {
                width: 100%;
                height: 14px;
                position: absolute;
                top: 14px;
                left: 29px;
            }
            
            #first {
                width: 334px;
                height: 38px;
                position: relative;
                background: url(img/list1.jpg) no-repeat;
                display: none;
            }
            
            #second {
                width: 351px;
                height: 38px;
                position: relative;
                background: url(img/list2.jpg) no-repeat;
                left: 94px;
                display: none;
            }
            
            #third {
                width: 316px;
                height: 38px;
                position: relative;
                background: url(img/list3.jpg) no-repeat;
                left: 101px;
                display: none;
            }
            
            #third li {
                margin-right: 16px;
            }
            
            #forth {
                width: 411px;
                height: 38px;
                position: relative;
                background: url(img/list4.jpg) no-repeat;
                display: none;
                left: 195px;
            }
            
            #forth li {
                margin-right: 18px;
            }
            
            #more {
                font-size: 16px;
                color: white;
                cursor: pointer;
                position: absolute;
                right: 26px;
                top: 10px;
            }
        </style>
        <script>
            $(function() {
                var aSpan = $('title').getElementsByTagName('span');
                var aDiv = $('list').getElementsByTagName('div');
                var timer = null;
                for(var i = 0; i < aSpan.length; i++) {
                    aSpan[i].index = i;
                    aSpan[i].err= = hide;
                    aSpan[i].err= = show;
                    aDiv[i].err==hide;
                    aDiv[i].err= = function() {
                        clearTimeout(timer);
                        this.style.display = 'inline-block';
                    }
                }
                //隐藏
                function hide() {
                    timer = setTimeout(function() {
                        ini();
                        aSpan[0].className = 'bg';
                    }, 1000)
                }
                //显示
                function show() {
                    //先隐藏,后显示
                    clearTimeout(timer);
                    ini();
                    this.className = 'bg';
                    aDiv[this.index].style.display = 'inline-block';
                }
                //清空
                function ini() {
                    for(var i = 0; i < aSpan.length; i++) {
                        aSpan[i].className = '';
                        aDiv[i].style.display = 'none';
                    }
                }
            })
        </script>
    </head>

    <body>
        <div id="box">
            <div id="title">
                <ul>
                    <span class="bg">首页</span>
                    <span>关于我们</span>
                    <span>作品</span>
                    <span>博客</span>
                </ul>
            </div>
            <div id="list">
                <div id="first">
                    <ul>
                        <li>最近更新</li>
                        <li>活动</li>
                        <li>报名试听</li>
                        <li>学员反馈</li>
                    </ul>
                </div>
                <div id="second">
                    <ul>
                        <li>秒味讲师</li>
                        <li>培训方式</li>
                        <li>培训理念</li>
                        <li>联系我们</li>
                    </ul>
                </div>
                <div id="third">
                    <ul>
                        <li>般固</li>
                        <li>MATRIX</li>
                        <li>留学e网</li>
                        <li>ECMall</li>
                    </ul>
                </div>
                <div id="forth">
                    <ul>
                        <li>JS教程</li>
                        <li>弹出层效果</li>
                        <li>3D球面标签云</li>
                        <li>window云计算</li>
                    </ul>
                </div>
            </div>
            <div id="more">
                <<更多</div>
            </div>
    </body>
</html>

2017-08-20 20:11  回复本帖
 
妙味用户968818

<ul></ul>里面怎么能直接用span呢,结构不对啊。

2017-08-23 09:49  回复本帖
萌萌哒(*^_^*)

妙味用户968818 2017-08-23 09:49发表的内容:

<ul></ul>里面怎么能直接用span呢,结构不对啊。

那我只想用span,外面改ul,改成什么好呢,要用东西包住他们定位

2017-08-23 12:23  回复本帖
 
妙味用户968818

萌萌哒(*^_^*) 2017-08-23 12:23发表的内容:

那我只想用span,外面改ul,改成什么好呢,要用东西包住他们定位

p啊,div啊都可以的

2017-08-23 14:23  回复本帖
萌萌哒(*^_^*)

妙味用户968818 2017-08-23 14:23发表的内容:

p啊,div啊都可以的

好,下次我会注意哒

2017-08-23 15:05  回复本帖
登录 后才可以发表回复