麻烦老师帮忙看哈滑动门这儿，为什么影响结构nav结构了。滑动门部分

麻烦老师帮忙看哈滑动门这儿，为什么影响结构nav结构了。滑动门部分

http://img1.sycdn.imooc.com//climg/5d73095c00016bb807650841.jpg

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/base.css">
        <link rel="stylesheet" href="css/index.css">
        <link rel="stylesheet" href="css/animate.css">
        <style>
            
            body{
                background-color: #fff;
                margin: 0;
                padding: 0;
                font-size: 12px;
                font-family: "Microsoft Yahei",微软雅黑
            }
            a{
                text-decoration: none;
            }
            
            h2,h3{
                margin: 0;
                padding: 0;
                font-weight: normal;
            }
            .screen-1__heading{
                transition:all 1s;
            }
            .screen-1__heading_animate_init{
                transform:translate(0,100%);
                opacity:0;
            }
            
            .screen-1__heading_animate_done{
                transform:translate(0,0);
                opacity:1;
            }
            
            /* 1 phone */
            .screen-1__phone{
                transition:all 1s;
            }
            .screen-1__phone_animate_init{
                transform:translate(0,-100%);
                opacity:0;
            }
            
            .screen-1__phone_animate_done{
                transform:translate(0,0);
                opacity:1;
            }
            
            /* 1 shadow */
            .screen-1__shadow{
                transition:all 1s;
            }
            .screen-1__shadow_animate_init{
                transform:translate(0,100%) scale(1.3);
                opacity:0;
            }
            
            .screen-1__shadow_animate_done{
                transform:translate(0,0) scale(1);
                opacity:1;
            }
            
            
            /* 第二屏 */
            
            
            .screen-2__heading,.screen-2__subheading,.screen-2__phone,.screen-2__point_i_1,.screen-2__point_i_2,.screen-2__point_i_3{
                transition:all 1s;
            }
            
            .screen-2__point_i_1,.screen-2__point_i_2,.screen-2__point_i_3{transition:all 1s 0.5s}
            
            
            /* init状态 */
            
            .screen-2__heading_animate_init{
                transform:translate(0,-100%);
                opacity:0;
            }
            .screen-2__subheading_animate_init,.screen-2__phone_animate_init{
                transform:translate(0,100%);
                    opacity:0;
            }
            
            
            .screen-2__point_i_1_animate_init{
                transform:translate(-100%,0);
                    opacity:0;
            }
            
            .screen-2__point_i_2_animate_init,.screen-2__point_i_3_animate_init{
                transform:translate(100%,0);
                    opacity:0;
            }
            
            
            /* done状态 */
            
            
            .screen-2__heading_animate_done,.screen-2__subheading_animate_done,.screen-2__phone_animate_done{
                transform:translate(0,0);
                    opacity:1;
            }
            
            
            .screen-2__point_i_1_animate_done{
                transform:translate(0,0);
                opacity:1;
            }
            
            .screen-2__point_i_2_animate_done,.screen-2__point_i_3_animate_done{
                transform:translate(0,0);
                opacity:1;
            }
            
            /* 第三屏 */
            
            
                    .screen-3__features,.screen-3__subheading,.screen-3__phone,.screen-3__heading{
                        transition:all 1s
                    }
                /* init状态 */
                    .screen-3__subheading_animate_init,.screen-3__phone_animate_init,.screen-3__heading_animate_init{
                        transform:translate(0,100%);
                        opacity:0;
                    }
                    .screen-3__features_animate_init{
                        transform:scale(0);
                        opacity:0;
                    }
                
            /* done状态 */
            
                    .screen-3__subheading_animate_done,.screen-3__phone_animate_done,.screen-3__heading_animate_done{
                        transform:translate(0,0);
                        opacity:1;
                    }
                    .screen-3__features_animate_done{
                        transform:scale(1);
                        opacity:1;
                    }
            
            /* 第四屏幕 */
                    .screen-4__heading,
                    .screen-4__subheading
                    {
                        transition:all 1s;
                    }
                    
                    .screen-4__type__item_i_1{transition:all 1s 0.3s ;}
                    .screen-4__type__item_i_2{transition:all 1s 0.5s ;}
                    .screen-4__type__item_i_3{transition:all 1s 0.7s ;}
                    .screen-4__type__item_i_4{transition:all 1s 0.9s ;}
                    
            
            
            /* init状态 */
            
            
            
                        .screen-4__heading_animate_init,
                        .screen-4__subheading_animate_init{
                            transform:translate(0,100%);
                            opacity:0;
                            
                        }
                        
                        .screen-4__type__item_i_1_animate_init,
                        .screen-4__type__item_i_2_animate_init,
                        .screen-4__type__item_i_3_animate_init,
                        .screen-4__type__item_i_4_animate_init{transform:scale(0.5);opacity:0}
            
            /* done状态 */
            
                        .screen-4__heading_animate_done,
                        .screen-4__subheading_animate_done{
                            transform:translate(0,0);
                            opacity:1;
                            
                        }
                        
                        .screen-4__type__item_i_1_animate_done,
                        .screen-4__type__item_i_2_animate_done,
                        .screen-4__type__item_i_3_animate_done,
                        .screen-4__type__item_i_4_animate_done{transform:scale(1);opacity:1}
            
            
            /* 第五屏 */
            
            
            .screen-5__bg,
            .screen-5__subheading,
            .screen-5__heading{
                transition: all 1s;
            }
            .screen-5__heading_animate_init{
                opacity: 0;
                transform: translate(0,-100%);
            }
            .screen-5__bg_animate_init,
            .screen-5__subheading_animate_init{
                opacity: 0;
                transform: translate(0,100%);
            }
            
            
            
            
            /* 使用帧动画 */
            
            @keyframes count {
                0%{transform:scale(1)}
                40%{transform:scale(.2)}
                100%{transform:scale(1)}/* 不能带,号 */
            }
            
            .screen-2__point::after{
                content:"";
                display:block;
                width:20px;
                height:20px;
                position:absolute;
                background-color:red;
                left:1px;
                top:1px;
                border-radius:50%;
                opacity:0.3;
                
            }
            .screen-2__point_i_1::after{
                left:auto;
                right:1px;
            }
            
            /* 第二个园 */
            .screen-2__point::before{
                content:"";
                display:block;
                width:16px;
                height:16px;
                position:absolute;
                background-color:red;
                left:3px;
                top:3px;
                border-radius:50%;
                opacity:0.2;
                
            }
            .screen-2__point_i_1::before{
                left:auto;
                right:3px;
            }
            
            
                 .screen-2__point::after{
                animation: count 1s infinite;
            }
            
                 .screen-2__point::before{
                animation: count 1s 0.5s infinite;
            }
            
            /*header  */
            
            .header{
                transition:all 2s;
            }
            
            
            .header_status_black{
                background: rgba(0,0,0,.5);
                position: fixed;
                top: 0px;
                left: 0px;
                right: 0px;
                z-index: 3;
            
            }
            .header_status_black .header__nav-item,
            .header_status_black .header__logo{
                color: #fff;
            }
            /* .header_status_black .header__nav-item_status_active{
                color: red;
            } */
            
            
            
            
            
            
            
            
            
        </style>
    </head>
    <body>
        <header class="header">
            <div class="header__wrap">
                <div class="header__logo">慕课手机</div>
                <nav class="header__nav">
                    <a href="javascript:;" class="header__nav-item header__nav-item_status_active">首页</a>
                    <a href="javascript:;" class="header__nav-item">外观</a>
                    <a href="javascript:;" class="header__nav-item">型号</a>
                    <a href="javascript:;" class="header__nav-item">配置</a>
                    <a href="javascript:;" class="header__nav-item">说明</a>
                    <a href="javascript:;" class="header__nav-item header__nav-item_status_button">立即购买</a>
                    <a href="javascript:;" class="header__nav-tip"></a>
                </nav>
            </div>
        </header>
        <div class="screen-1">
            <h2 class="screen-1__heading"><b>慕课手机</b>&nbspd让你的生活更精彩</h2>
            <div class="screen-1__phone"></div>
            <div class="screen-1__shadow"></div>
        </div>
        <div class="screen-2">
            <h2 class="screen-2__heading">优美的设计，更令人着迷</h2>
            <h3 class="screen-2__subheading">采用受欢迎的设计，让它更加出色。<br>
款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
            <div class="screen-2__phone">
                <div class="screen-2__point screen-2__point_i_1">高清摄像</div>
                <div class="screen-2__point screen-2__point_custom_right screen-2__point_i_2">超薄机身</div>
                <div class="screen-2__point screen-2__point_custom_right screen-2__point_i_3">大屏显示</div>
            </div>
        </div>
        <div class="screen-3">
            <div class="screen-3__wrap">
                    <h2 class="screen-3__heading">外形小巧，功能强大的手机</h2>
                    <h3 class="screen-3__subheading">采用受欢迎的设计，让它更加出色。<br>
                    款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。
                    </h3>
                    <div class="screen-3__phone"></div>
                    <div class="screen-3__features">
                          <div class="screen-3__features__item">
                            <div class="screen-3__features__item__number">5.7</div>
                            <div class="screen-3__features__item__desc">英寸大屏</div>
                        </div>
                        <div class="screen-3__features__item">
                            <div class="screen-3__features__item__number">1200</div>
                            <div class="screen-3__features__item__desc">万像素</div>
                        </div>
                        <div class="screen-3__features__item">
                            <div class="screen-3__features__item__number">3D</div>
                            <div class="screen-3__features__item__desc">touch</div>
                        </div>
                        <div class="screen-3__features__item">
                            <div class="screen-3__features__item__number">A9</div>
                            <div class="screen-3__features__item__desc">处理器</div>
                        </div>
                    </div>
            </div>
        </div>
        <div class="screen-4">
            <div class="screen-4__wrap">
                <h2 class="screen-4__heading">丰富的手机型号</h2>
                <h3 class="screen-4__subheading">找到适合你的手机</h3>
                <div class="screen-4__type">
                    <div class="screen-4__type__item screen-4__type__item_i_1">
                        <div class="screen-4__type__item__color">慕课红</div>
                        <div class="screen-4__type__item__storage">16G/32G/64G</div>
                    </div>
                    <div class="screen-4__type__item screen-4__type__item_i_2">
                        <div class="screen-4__type__item__color">土豪金</div>
                        <div class="screen-4__type__item__storage">16G/32G/64G</div>
                    </div>
                    <div class="screen-4__type__item screen-4__type__item_i_3">
                        <div class="screen-4__type__item__color">太空灰</div>
                        <div class="screen-4__type__item__storage">16G/32G/64G</div>
                    </div>
                    <div class="screen-4__type__item screen-4__type__item_i_4">
                        <div class="screen-4__type__item__color">绅士黑</div>
                        <div class="screen-4__type__item__storage">16G/32G/64G</div>
                    </div>
                </div>
                <!--end type-->
            </div>
            <!--end warp-->
        </div>
        <div class="screen-5">
                <h2 class="screen-5__heading">游戏、学习、拍照、有这一部就够了</h2>
                <h3 class="screen-5__subheading">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。</h3>
                <div class="screen-5__bg"></div>
            </div>
            <div class="screen-buy">
                <a class="screen-buy__button" href="javascript:;">立即购买</a>
            </div>
            <footer class="footer">
                © 2016 imooc.com 京ICP备13046642号
            </footer>
            <div class="outline">
                <a href="javascript:;" class="outline__item">首页</a>
                <a href="javascript:;" class="outline__item">外观</a>
                <a href="javascript:;" class="outline__item">配置</a>
                <a href="javascript:;" class="outline__item">型号</a>
                <a href="javascript:;" class="outline__item">说明</a>
            </div>
        </div>
        <script type="text/javascript" src="js/test.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script>
            
            var getEle = function(selector){
                return document.querySelector(selector)
            };
            var getAllEle = function(selector){
                return document.querySelectorAll(selector)
            };
            
            var getCls = function(element){
                 return element.getAttribute("class")
            };
            
            var setCls = function(element,cls){
                 return element.setAttribute("class",cls);
            };
            
            
            var delCls = function( element , cls){
              var baseCls  = getCls(element);
              if( baseCls.indexOf(cls) > -1){ // 更精确的需要用正则表达式 ,因为这里只用于切换 _animate_in 所以没事
                  setCls( element,baseCls.split(cls).join(' ').replace(/\s+/g,' ') );
              }
              return ;
            }
            
            var addCls = function( element , cls ){
              var baseCls  = getCls(element);
              if( baseCls.indexOf(cls) === -1){
                  setCls(element,baseCls+' '+cls); // 注意空格
              }
              return ;
            }
            
            
            
            
            
            var screenAnimateElements={
                ".screen-1" : [
                    ".screen-1__heading",
                    ".screen-1__phone",
                    ".screen-1__shadow"
                ],
                ".screen-2" :[
                    ".screen-2__heading",
                    ".screen-2__subheading",
                    ".screen-2__phone",
                    ".screen-2__point_i_1",
                    ".screen-2__point_i_2",
                    ".screen-2__point_i_3"
                ],
                ".screen-3":[
                    ".screen-3__heading",
                    ".screen-3__subheading",
                    ".screen-3__phone",
                    ".screen-3__features"
                ],
                ".screen-4":[
                    ".screen-4__heading",
                    ".screen-4__subheading",
                    ".screen-4__type__item_i_1",
                    ".screen-4__type__item_i_2",
                    ".screen-4__type__item_i_3",
                    ".screen-4__type__item_i_4"
                ],
                  '.screen-5' : [
                   '.screen-5__heading',
                  '.screen-5__subheading',
                  '.screen-5__bg',
                ]
                
                
            };
            
            var setScreenAnimateInit = function(screenCls){
                    var screen = document.querySelector(screenCls);//获取当前屏的元素
                    var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素
                
                    for(var i=0;i<animateElements.length;i++){
                        var element = document.querySelector(animateElements[i]);
                        /* 为什么不直接element.className+=" "+ "screen-1__heading_animate_init"*/
                        var basecls = element.getAttribute("class");
                        element.setAttribute("class",basecls+" "+animateElements[i].substr(1)+"_animate_init");
                    }
                }
            
            
                var setScreenAnimateDone = function(screenCls){
                    console.log(111);
                    var screen = document.querySelector(screenCls);//获取当前屏的元素
                    var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素
                    for(var i=0;i<animateElements.length;i++){
                        var element = document.querySelector(animateElements[i]);
                        /* 为什么不直接element.className+=" "+ "screen-1__heading_animate_init"*/
                        var basecls = element.getAttribute("class");
                        element.setAttribute("class",basecls.replace("_animate_init","_animate_done"));
                    }
                };
                
                
                
            /* 初始化 */
            window.onload = function(){
                for(var k in screenAnimateElements){
                    setScreenAnimateInit(k)
                };/*done*/
                
                
                
                
                };
                
            window.onscroll = function(){
                    var top = document.documentElement.scrollTop;
                     if( top > 100 ){
                        addCls( getEle('.header'),'header_status_black' );
                    }else{
                        delCls( getEle('.header'),'header_status_black' );}
                    
                    if(top>1){setScreenAnimateDone(".screen-1");};
                    
                    
                    if(top>700*1){setScreenAnimateDone(".screen-2");};
                    if(top>700*2){setScreenAnimateDone(".screen-3");};
                    if(top>700*3){setScreenAnimateDone(".screen-4");};
                    if(top>700*4){setScreenAnimateDone(".screen-5");};
                }
            
            
            
            
               var navs = getEle(".header__nav");
               var navSs = getEle(".outline");
               for(var i = 0,len=navs.children.length;i<len;i++){
                  funNav(i,navs.children[i])
               }
                 for(var j = 0,len=navSs.children.length;j<len;j++){
                     funNav(j,navSs.children[j]);
               }
              
                var topm =  document.documentElement||document.body;
                //这样有效果？
                
                
                //var tomp =document.body||document.documentElement；
                //这样为什么在下面没有效果？
              function funNav(num,item){
                  item.onclick = function(){
                    switchItemActive();
                    topm.scrollTop = 800*num;
                    addCls(this,"header__nav-item_status_active");
                    }
                }
               
               var switchItemActive = function(ind){
                   
                    for(var i = 0,len=navs.children.length;i<len;i++){
                         delCls(navs.children[i],"header__nav-item_status_active") ;
                   }
                   
               };
              
              
             /* 滑动门部分*/
              
            
               var htm = getEle(".header__nav-tip");
               
             for(var m = 0,len=navs.children.length;m<len;m++){
                      funNav(m,navs.children[m])
                };
            
                 function funNav(num,item){
                     item.addEventListener("mousemove",function(){
                         addCls(this,"header__nav-tip");
                         htm.style.left=(num*70)+"px";
                        
                    });
                      item.addEventListener("mouseout",function(){
                             delCls(this,"header__nav-tip");    
                             
                     })
                    
                    }
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        </script>
    </body>
</html>
慕盖茨6251851 2019-09-07
源自：宣传页项目   5-5 JS实现滑动门效果
0
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

2回答
提问者 慕盖茨6251851 2019-09-07 10:23:49

不用麻烦老师了，找到问题了。3Q

0
收起回答
提问者 慕盖茨6251851 2019-09-07 10:22:59

不用麻烦老师，终于找到问题了，这是个单独的div。

1
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

滑动门特效如果文字宽度不一样 如何自适应宽度？
17 0 2
mouseout监听滑动门会失效
5 0 3
滑动门用事件委托怎么写
1 0 5
上下滑动与左右滑动
0 0 2
ViewPager里的ViewPager滑动不了
16 0 4

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师