拖动滚动条第一屏不显示是哪里的问题？

拖动滚动条第一屏不显示是哪里的问题？

//获取元素

var getElem=function(selector){

    return document.querySelector(selector);

}

var getAllElem=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 addCls=function(element,cls){

var baseCls=getCls(element);

if(baseCls.indexOf(cls)===-1){

setCls(element,baseCls+' '+cls);

}

}

//为元素删除样式

var delCls=function(element,cls){

    var baseCls=getCls(element);

if(baseCls.indexOf(cls)!=-1){

setCls(element,baseCls.split(cls).join(' ').replace(/\s+/g,' '))

//一个以上空格则用' '替换，加g全部替换，不加g只替换第一个

}

}


//第一步：初始化样式 init

var screenAnimateElements={

    '.screen-1':[

        '.screen-1__heading',

        '.screen-1__phone',

        '.screen-1__shadow',

    ],

    '.screen-2':[

        '.screen-2__heading',

        '.screen-2__phone',

        '.screen-2__subheading',

        '.screen-2__point_i_1',

        '.screen-2__point_i_2',

        '.screen-2__point_i_3',

    ],

    '.screen-3':[

        '.screen-3__heading',

        '.screen-3__phone',

        '.screen-3__subheading',

        '.screen-3__features',

        '.screen-3__features__item',

    ],

    '.screen-4':[

        '.screen-4__heading',

        '.screen-4__subheading',

        '.screen-4__type__item1',

        '.screen-4__type__item2',

        '.screen-4__type__item3',

        '.screen-4__type__item4',

    ],

    '.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]);

        var baseCls=element.getAttribute('class');

        element.setAttribute('class',baseCls+' '+animateElements[i].substr(1)+'_animate_init');

            }

}


//设置播放屏内的元素动画

var playScreenAnimateDone=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]);

    var baseCls=element.getAttribute('class');

    element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));

        }


}

window.onload=function(){

    for(k in screenAnimateElements){

        setScreenAnimateInit(k);

    }

}


//第二步：滚动到哪里，就播放哪里

window.onscroll=function(){

    var top=document.body.scrollTop;

    //滚动条的高度

    console.log(top);

    if(top>1){

    playScreenAnimateDone('.screen-1');

    }

}
王嘉炜 2019-09-19
源自：宣传页项目   5-3 JS实现交互动画(导航条)
2
收起

正在回答

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

7回答
好帮手慕言 回答被采纳获得+3积分 2019-09-20 18:10:01

同学你好，因为在点击导航项时会直接跳转到点击的那一屏，因此点击导航项不能看到屏内动画消失的效果。目前没有很好的解决办法。

在滚动时能看到这种效果，点击导航项又是另一种效果，也是很有新意的。可以保留这样的效果哦

如果帮助到了你，欢迎采纳~祝学习愉快~

0
收起回答
提问者 王嘉炜 2019-09-20 15:38:59

//获取元素

var getElem=function(selector){

    return document.querySelector(selector);

}

var getAllElem=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 addCls=function(element,cls){

var baseCls=getCls(element);

if(baseCls.indexOf(cls)===-1){

setCls(element,baseCls+' '+cls);

}

}

//为元素删除样式

var delCls=function(element,cls){

    var baseCls=getCls(element);

if(baseCls.indexOf(cls)!=-1){

setCls(element,baseCls.split(cls).join(' ').replace(/\s+/g,' '))

//一个以上空格则用' '替换，加g全部替换，不加g只替换第一个

}

}


//第一步：初始化样式 init

var screenAnimateElements={

    '.screen-1':[

        '.screen-1__heading',

        '.screen-1__phone',

        '.screen-1__shadow',

    ],

    '.screen-2':[

        '.screen-2__heading',

        '.screen-2__phone',

        '.screen-2__subheading',

        '.screen-2__point_i_1',

        '.screen-2__point_i_2',

        '.screen-2__point_i_3',

    ],

    '.screen-3':[

        '.screen-3__heading',

        '.screen-3__phone',

        '.screen-3__subheading',

        '.screen-3__features',

        '.screen-3__features__item',

    ],

    '.screen-4':[

        '.screen-4__heading',

        '.screen-4__subheading',

        '.screen-4__type__item1',

        '.screen-4__type__item2',

        '.screen-4__type__item3',

        '.screen-4__type__item4',

    ],

    '.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]);

        var baseCls=element.getAttribute('class');

        element.setAttribute('class',baseCls+' '+animateElements[i].substr(1)+'_animate_init');

            }

}


//设置播放屏内的元素动画

var playScreenAnimateDone=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]);

    var baseCls=element.getAttribute('class');

    element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));

        }


}

window.onload=function(){

    for(k in screenAnimateElements){

        setScreenAnimateInit(k);

    }

}


// 第二步：滚动到哪里，就播放哪里

var navItems=getAllElem('.header__nav-item');

var outlineItems=getAllElem('.outline__item');


var switchNavItemsActive=function(idx){

for(var i=0;i<navItems.length;i++){

    delCls(navItems[i],'header__nav-item_status_active');

}

addCls(navItems[idx],'header__nav-item_status_active');

for(var i=0;i<outlineItems.length;i++){

    delCls(outlineItems[i],'outline__item_status_active');

}

addCls(outlineItems[idx],'outline__item_status_active');

}

switchNavItemsActive(0);

window.onscroll=function(){

    var top=document.documentElement.scrollTop;//谷歌浏览器支持的滚动条高度方法

    //滚动条的高度

    console.log(top);

    if(top>80){

    addCls(getElem('.header'),'header_status_back');

    addCls(getElem('.outline'),'outline_status_in');}

    else{

    delCls(getElem('.header'),'header_status_back');

    delCls(getElem('.outline'),'outline_status_in');

    }

    if(top<=800*1-200){

    playScreenAnimateDone('.screen-1');

    switchNavItemsActive(0)}

    if(top>800*1-200&&top<800*1-100){

    setScreenAnimateInit('.screen-1');

    switchNavItemsActive(0)}

    if((top>=800*1-100)&&top<=800*2-200){

    playScreenAnimateDone('.screen-2');

    switchNavItemsActive(1)}

    if(top>800*2-200&&top<800*2-100){

    setScreenAnimateInit('.screen-2');

    switchNavItemsActive(1)}

    if(top>=800*2-100&&top<=800*3-200){

    playScreenAnimateDone('.screen-3');

    switchNavItemsActive(2)}

    if(top>800*3-200&&top<800*3-100){

    setScreenAnimateInit('.screen-3');

    switchNavItemsActive(2)}

    if(top>=800*3-100&&top<=800*4-200){

    playScreenAnimateDone('.screen-4');

    switchNavItemsActive(3)}

    if(top>800*4-200&&top<800*4-100){

    setScreenAnimateInit('.screen-4');

    switchNavItemsActive(3)}

    if(top>=800*4-100&&top<=800*5-200){

    playScreenAnimateDone('.screen-5');

    switchNavItemsActive(4)}

    if(top>800*5-200&&top<800*5-100){

    setScreenAnimateInit('.screen-5');

    switchNavItemsActive(4)}

}


//第三步双向定位


var setNavJump=function(i,lib){

var item=lib[i];

item.onclick=function(){

    document.documentElement.scrollTop=i*800;

//设置Top的值

}

}

for(var i=0;i<navItems.length;i++){

    setNavJump(i,navItems)

    

}

for(var i=0;i<outlineItems.length;i++){

    setNavJump(i,outlineItems)

}


0
收起回答
好帮手慕言 2019-09-20 10:34:45

同学你好，在screenAnimateElements里面多了一个.heading，去掉就可以了。

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

同学可以修改后再测试下。

如果帮助到了你，欢迎采纳~祝学习愉快~

0
收起回答
  • 提问者 王嘉炜 #1
    我想做出某一屏快移出到外围时屏内元素动画消失的效果，现在在拖动滚动条时是有效的，但点击右侧导航栏时有时会不显示（就是先从头到尾滚动一遍，再从最后一屏的右侧导航栏点击跳转到其它页面的时候），不知道是哪里出了问题
    2019-09-20 15:43:08
提问者 王嘉炜 2019-09-19 22:55:18

刚刚的是完整的CSS，控制台有一个报错不知道如何解决

0
收起回答
提问者 王嘉炜 2019-09-19 22:54:32

//获取元素

var getElem=function(selector){

    return document.querySelector(selector);

}

var getAllElem=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 addCls=function(element,cls){

var baseCls=getCls(element);

if(baseCls.indexOf(cls)===-1){

setCls(element,baseCls+' '+cls);

}

}

//为元素删除样式

var delCls=function(element,cls){

    var baseCls=getCls(element);

if(baseCls.indexOf(cls)!=-1){

setCls(element,baseCls.split(cls).join(' ').replace(/\s+/g,' '))

//一个以上空格则用' '替换，加g全部替换，不加g只替换第一个

}

}


//第一步：初始化样式 init

var screenAnimateElements={

    '.heading':['.heading'],

    '.screen-1':[

        '.screen-1__heading',

        '.screen-1__phone',

        '.screen-1__shadow',

    ],

    '.screen-2':[

        '.screen-2__heading',

        '.screen-2__phone',

        '.screen-2__subheading',

        '.screen-2__point_i_1',

        '.screen-2__point_i_2',

        '.screen-2__point_i_3',

    ],

    '.screen-3':[

        '.screen-3__heading',

        '.screen-3__phone',

        '.screen-3__subheading',

        '.screen-3__features',

        '.screen-3__features__item',

    ],

    '.screen-4':[

        '.screen-4__heading',

        '.screen-4__subheading',

        '.screen-4__type__item1',

        '.screen-4__type__item2',

        '.screen-4__type__item3',

        '.screen-4__type__item4',

    ],

    '.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]);

        var baseCls=element.getAttribute('class');

        element.setAttribute('class',baseCls+' '+animateElements[i].substr(1)+'_animate_init');

            }

}


//设置播放屏内的元素动画

var playScreenAnimateDone=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]);

    var baseCls=element.getAttribute('class');

    element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));

        }


}

window.onload=function(){

    for(k in screenAnimateElements){

        setScreenAnimateInit(k);

    }

}


// 第二步：滚动到哪里，就播放哪里


window.onscroll=function(){

    var top=document.documentElement.scrollTop;

    //滚动条的高度

    console.log(top);

    if(top>0){

    addCls(getElem('.header'),'header_status_back');

    }

    else{

    delCls(getElem('.header'),'header_status_back');

    }

    if(top>0){

    playScreenAnimateDone('.screen-1');

    }

    if(top>800*1){

    playScreenAnimateDone('.screen-2');

    }

    if(top>800*2){

    playScreenAnimateDone('.screen-3');

    }

    if(top>800*3){

    playScreenAnimateDone('.screen-4');

    }

    if(top>800*4){

    playScreenAnimateDone('.screen-5');

    }

}


0
收起回答
提问者 王嘉炜 2019-09-19 21:54:00

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="css/index.css">

    <link rel="stylesheet" type="text/css" href="css/base.css">

    <link rel="stylesheet" type="text/css" href="css/animate - 副本.css">

</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">首页</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_custom_button">立即购买</a>

            </nav>

        </div>

    </header>

    <div class="screen-1">

        <h2 class="screen-1__heading">

            <b>慕课手机</b> 让你的生活更精彩

        </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">

            <a class="screen-3__features__item">

                <div class="screen-3__features__item__number">5.7</div>

                <div class="screen-3__features__item__desc">英寸大屏</div>

            </a>

            <a class="screen-3__features__item">

            <div class="screen-3__features__item__number">1200</div>

                <div class="screen-3__features__item__desc">万像素</div>

            </a>

            <a class="screen-3__features__item">

            <div class="screen-3__features__item__number">3D</div>

                <div class="screen-3__features__item__desc">Touch</div>

            </a>

            <a class="screen-3__features__item">

            <div class="screen-3__features__item__number">A9</div>

                <div class="screen-3__features__item__desc">处理器</div>

            </a>

        </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__item1">

                <div class="screen-4__type__item__color">慕课红</div>

                <div class="screen-4__type__item__storage">32G/64G/128G</div>

            </div>

            <div class="screen-4__type__item screen-4__type__item2">

                <div class="screen-4__type__item__color">土豪金</div>

                <div class="screen-4__type__item__storage">32G/64G/128G</div>

            </div>

            <div class="screen-4__type__item screen-4__type__item3">

                <div class="screen-4__type__item__color">太空灰</div>

                <div class="screen-4__type__item__storage">32G/64G/128G</div>

            </div>

            <div class="screen-4__type__item screen-4__type__item4">

                <div class="screen-4__type__item__color">绅士黑</div>

                <div class="screen-4__type__item__storage">32G/64G/128G</div>

            </div>

            </div>

        </div>

    </div>

    <div class="screen-5">

        <div class="screen-5__bg"></div>

        <h2 class="screen-5__heading">游戏、学习、拍照，有这一部就够了</h2>

        <h3 class="screen-5__subheading">看视频、拍摄高清视频与照片、视频聊天、通话相结合，一机多功能，让您生活更丰富精彩。</h3>

    </div>

    <div class="screen-buy">

        <a class="screen-buy__button">立即购买</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>

    <script type="text/javascript" src="js/test.js"></script>

    <script type="text/javascript" src="js/index.js"></script>

</body>

</html>


0
收起回答
提问者 王嘉炜 2019-09-19 21:53:27

/* 第一屏电话 */


/* 第一屏动画时间 */

.screen-1__heading,.screen-1__phone,.screen-1__shadow{

    transition: all 1s;

}

/* 第一屏平移恢复设置 */

.screen-1__heading_animate_done,.screen-1__phone_animate_done,

.screen-1__shadow_animate_done{

    opacity:1; 

    transform: translate(0,0);

}

/* 第一屏文字改变 */

.screen-1__heading_animate_init{

    opacity:0;

    transform: translate(0,100%);

}


/* 第一屏手机图片改变 */

.screen-1__phone_animate_init{

    opacity:0;

    transform: translate(0,-100%);

}


/* 第一屏阴影改变 */

.screen-1__shadow_animate_init{

    opacity:0;

    transform: translate(0,100%);

}


/* 第二屏变化时间设置 */

.screen-2__subheading,

.screen-2__phone,

.screen-2__heading

{

    transition:all 1s;

}

/* 第二屏初始状态设置 */

.screen-2__heading_animate_done,

.screen-2__subheading_animate_done,

.screen-2__phone_animate_done,

.screen-2__point_animate_done{

    opacity:1;

    transform:translate(0,0);

}


.screen-2__heading_animate_init{

    opacity:0;

    transform:translate(0,-100%);

}


.screen-2__subheading_animate_init{

    opacity:0;

    transform:translate(0,100%);

}


.screen-2__phone_animate_init{

    opacity:0;

    transform:translate(0,50%);

}

.screen-2__point{

    transition:all .5s 1s;

}


/* 第二屏point变化速度及延时设置 */

/* .screen-2__point_i_1_animate_init,

.screen-2__point_i_2_animate_init,

.screen-2__point_i_3_animate_init{

    transition:all .5s;

} */

/* 第二屏point恢复速度及延时设置 */

/* .screen-2__point_i_1_animate_done,

.screen-2__point_i_2_animate_done,

.screen-2__point_i_3_animate_done{

    transition:all .5s .5s;

} */


.screen-2__point_i_1_animate_init{

    opacity:0;

    transform:translate(-100%,0);

}

.screen-2__point_i_2_animate_init,.screen-2__point_i_3_animate_init{

    opacity:0;

    transform:translate(100%,0);

}


/* 第三屏变化时间设置 */

.screen-3__subheading,

.screen-3__phone,

.screen-3__heading,

.screen-3__features

{

    transition:all 1s;

}

/* 第三屏初始状态设置 */

.screen-3__subheading_animate_done,

.screen-3__phone_animate_done,

.screen-3__heading_animate_done{

opacity:1;

transform:translate(0,0);

}

/* 第三屏大头部变化设置 */

.screen-3__heading_animate_init{

opacity:0;

transform:translate(0,-100%);

}

/* 第三屏小头部变化设置 */

.screen-3__subheading_animate_init{

opacity:0;

transform:translate(0,100%);

}

/* 第三屏手机图变化设置 */

.screen-3__phone_animate_init{

opacity:0;  

transform:translate(0,100%);

}


.screen-3__features_animate_done{

    opacity:1;

    transform:scale(1);

}

/* 第三屏手机参数变化设置 */

.screen-3__features_animate_init{

    opacity:0;

    transform:scale(.5);

}


.screen-3__features__item{

transition:all 0.2s;

cursor: pointer;

}

.screen-3__features__item:hover{

    transform:scale(1.1);

    border-color:#fff;

}


.screen-4__heading,

.screen-4__subheading

{

    transition:all 1s;

}

.screen-4__heading_animate_done,

.screen-4__subheading_animate_done{

    opacity:1;

    transform:translate(0,0);

    }

.screen-4__heading_animate_init{

    opacity:0;

    transform:translate(0,-100%);

    }


.screen-4__subheading_animate_init{

    opacity:0;

    transform:translate(0,100%);

    }


.screen-4__type__item1{

    transition:all 1s .2s;

}

.screen-4__type__item2{

    transition:all 1s .5s;

}

.screen-4__type__item3{

    transition:all 1s .8s;

}

.screen-4__type__item4{

    transition:all 1s 1.2s;}


    .screen-4__type__item1_animate_done,

    .screen-4__type__item2_animate_done,

    .screen-4__type__item3_animate_done,

    .screen-4__type__item4_animate_done{

        opacity:1;

        

    }

    .screen-4__type__item1_animate_init,.screen-4__type__item2_animate_init,

    .screen-4__type__item3_animate_init,

    .screen-4__type__item4_animate_init{

        opacity:0;

    }

    

/* 第五屏 */

.screen-5__subheading,

.screen-5__bg,

.screen-5__heading{

    transition:all 1s;

}


.screen-5__subheading_animate_done,

.screen-5__bg_animate_done,

.screen-5__heading_animate_done{

    opacity:1;

    transform:translate(0,0);

}


.screen-5__subheading_animate_init{

    opacity:0;

    transform:translate(0,100%);

}

.screen-5__bg_animate_init{

    opacity:0;

    transform:translate(0,100%);

}

.screen-5__heading_animate_init{

    opacity:0;

    transform:translate(0,-100%);

}




/* 定义帧动画 */

@-webkit-keyframes bounce{

    0%,100% {

        transform:scale(0);

    }

    50%{

        transform:scale(1);

    }

    /* 100%{

        transform:scale(0);

    } */

}


/* 使用帧动画 */

.screen-2__point:after,

.screen-2__point:before{

content:' ';

display:block;

height:20px;

width:20px;

position:absolute;

top:1px;

left:1px;

background:rgba(255,0,0,.4);

-webkit-animation:bounce 2s infinite;

border-radius: 50%;

}


.screen-2__point:before{

-webkit-animation:bounce 2s infinite 1s;

}


.screen-2__point_i_1:after,

.screen-2__point_i_1:before{

    top:1px;

    left:auto;

    right:1px;

}


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

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

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

0 星

相似问题

麻烦老师检查一哈，还有好像我的滚动条没显示出来？
3 0 4
老师，为什么我滑动滚动条时，
2 0 4
滚动条问题
2 0 6
JS怎么控制，滚动的时候是一屏一屏的
0 0 3
自己做了个练习题，怎么用JS实现自动滚动功能，没有任何思路麻烦老师帮忙看看，谢谢
47 0 6

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

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

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

了解课程

本课精华内容

问答 作业

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

16 1

请老师检查

65 3

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

26 3

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

18 1

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

188 1

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

在线咨询

领取优惠

免费试听

领取大纲

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