老师你好！请检查

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</nav>

</div>

</header>

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

</div>

</div>

<h1>优美的设计，更令人着迷</h1>

<h4>采用受欢迎的设计，让它更加出色。</h4>

<h4>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h4>

</div>

</div>

<h1>外形小巧，功能强大的手机</h1>

<h4>采用受欢迎的设计，让它更加出色。</h4>

<h4>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。

</h4>

</div>

</div>

</div>

<p class="subhead">touch</p>

</div>

</div>

<h1>丰富的手机型号</h1>

<h4>找到适合你的手机</h4>

</div>

</div>

</div>

</div>

</div>

<h1>游戏、学习、拍照、有这一部就够了</h1>

<h4>看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。</h4>

</div>

</div>

</div>

</div>

</footer>

</body>

</html>

/* 通用样式 */

* {

margin: 0;

padding: 0;

}

body {

background-color: #fff;

font-family: "微软雅黑";

}

a {

text-decoration: none;

}

li {

list-style: none;

}

/* 头部 */

.header {

width: 100%;

height: 80px;

background-color: #f5f5f5;

}

.header_wrap {

width: 1200px;

height: 80px;

margin: 0 auto;

position: relative;

}

.header_logo {

float: left;

width: 300px;

}

.header_logo img {

margin: 20px 10px 0 10px;

}

.header_logo span {

font-size: 20px;

color: #07111b;

position: absolute;

top: 50%;

margin-top: -10px;

}

.nav {

width: 528px;

height: 80px;

line-height: 80px;

float: right;

position: relative;

}

.nav > a{

display: block;

float: left;

font-size: 14px;

color: #292f35;

width: 30px;

text-align: center;

padding-right: 40px;

}

.nav > a.nav_active{

color: #f01400;

}

.hader_nav_bar{

width: 30px;

height: 2px;

position:absolute;

left: 0;

bottom: 15px;

background-color: #f01400;

transition: all 0.5s;

}

.nav_sub {

width: 90px;

height: 40px;

line-height: 40px;

text-align: center;

background-color: #07111b;

position: absolute;

top: 50%;

right: 5%;

margin-top: -20px;

border-radius: 4px;

}

.nav_sub a {

color: #f4f4f5;

font-size: 14px;

}

.nav_sub a:hover {

color: #f01400

}

/* 第一屏 */

.screen_1 {

width: 100%;

height: 880px;

background: url(../img/bg-screen-1.png) no-repeat center;

background-size: cover;

position: relative;

}

.screen_1_text {

text-align: center;

padding-top: 155px;

}

.screen_1_text h1 {

font-size: 48px;

color: #f01400;

font-weight: normal;

}

.screen_1_text b {

color: #4d555d;

font-weight: normal;

}

.screen_1_phone{

width: 1375px;

height: 305px;

position: absolute;

left: 50%;

margin-left: -687px;

bottom: 181px;

z-index: 10;

background: url(../img/screen-1-phone.png) no-repeat;

}

.screen_1_shadow {

position: absolute;

bottom: 0px;

left: 50%;

margin-left: -616px;

}

.screen_1_shadow img {

width: 1233px;

height: 411px;

}

/* 第二屏 */

.screen_2 {

width: 100%;

height: 800px;

background-color: #fafafa;

overflow: hidden;

}

.screen_2_wrap {

width: 1200px;

height: 800px;

margin: 0 auto;

z-index: 10;

position: relative;

}

.screen_2_head {

text-align: center;

}

.screen_2_head h1 {

font-size: 48px;

color: #f01400;

font-weight: normal;

padding: 96px 0 25px 0;

}

.screen_2_head h4 {

color: #273137;

font-size: 16px;

font-weight: normal;

line-height: 28px;

}

.screen_2_phone{

width: 928px;

height: 873px;

position: absolute;

left: 50%;

margin-left: -464px;

bottom: -350px;

background: url(../img/screen-2-phone.png) no-repeat;

}

.screen_2_icon .screen_2_point{

background: url(../img/icon-point-left.png) no-repeat center left;

height: 22px;

line-height: 22px;

font-size: 24px;

color: #4d555d;

}

.screen_2_icon .screen_2_point_left{

background: url(../img/icon-point-right.png) no-repeat center right;

padding-right:115px ;

}

.screen_2_icon .screen_2_point_right{

padding-left:115px ;

}

.screen_2_icon .screen_2_point_it1{

position: absolute;

top: 305px;

right: 279px;

}

.screen_2_icon .screen_2_point_it2{

position: absolute;

top: 602px;

right: 176px;

}

.screen_2_icon .screen_2_point_it3{

position: absolute;

top: 423px;

left: -20px;

}

/* 第三屏 */

.screen_3 {

width: 100%;

height: 800px;

background: url(../img/bg-screen-3.png) no-repeat center;

background-size: cover;

}

.screen_3_wrap {

width: 1200px;

height: 800px;

margin: 0 auto;

position: relative;

overflow: hidden;

}

.screen_3_head {

margin-top: 96px;

}

.screen_3_head h1 {

font-size: 48px;

color: #ffffff;

font-weight: normal;

padding-bottom: 17px;

}

.screen_3_head h4 {

font-size: 16px;

color: #f9f4f4;

font-weight: normal;

padding-bottom: 10px;

}

.screen_3_phone{

width: 767px;

height: 939px;

background: url(../img/screen-3-phone.png) no-repeat center;

position: absolute;

top: 190px;

right: 0;

}

.screen_3_box {

width: 138px;

height: 118px;

border: 1px solid #cc7173;

border-radius: 5px;

cursor: pointer;

color: #ffffff;

position: relative;

}

.screen_3_box_item {

text-align: center;

margin-top: 10px;

}

.screen_3_box_item .title {

font-size: 48px;

}

.screen_3_box_item .subhead {

color: #faf4f4;

font-size: 16px;

}

.screen_3_box:nth-child(3) {

position: absolute;

left: 10px;

bottom: 283px;

}

.screen_3_box:nth-child(4) {

position: absolute;

left: 175px;

bottom: 283px;

}

.screen_3_box:nth-child(5) {

position: absolute;

left: 10px;

bottom: 139px;

}

.screen_3_box:nth-child(6) {

position: absolute;

left: 175px;

bottom: 139px;

}

/* 第四屏 */

.screen_4 {

width: 100%;

height: 800px;

}

.screen_4_wrap {

width: 1200px;

height: 800px;

margin: 0 auto;

position: relative;

}

.screen_4_head {

text-align: center;

}

.screen_4_head h1 {

font-size: 48px;

color: #f01400;

font-weight: normal;

padding: 130px 0 30px 0;

}

.screen_4_head h4 {

font-size: 16px;

color: #07111b;

font-weight: normal;

}

.screen_4_phone {

width: 240px;

float: left;

text-align: center;

}

.screen_4_phone_text1 {

margin-top: 20px;

font-size: 16px;

color: #2c3228;

}

.screen_4_phone_text2 {

margin-top: 5px;

font-size: 12px;

color: #93999f;

}

.screen_4_phone1 {

position: absolute;

top: 308px;

left: 0;

}

.screen_4_phone2 {

position: absolute;

top: 308px;

left: 310px;

}

.screen_4_phone3 {

position: absolute;

top: 308px;

left: 620px;

}

.screen_4_phone4 {

position: absolute;

top: 308px;

left: 930px;

}

/* 第五屏 */

.screen_5 {

width: 100%;

height: 800px;

background-color: #d9dde1;

position: relative;

overflow: hidden;

}

.screen_5_head {

text-align: center;

}

.screen_5_head h1 {

font-size: 48px;

color: #f01400;

font-weight: normal;

padding: 130px 0 30px 0;

}

.screen_5_head h4 {

font-size: 16px;

color: #262c33;

font-weight: normal;

}

.screen_5_bg{

background: url(../img/bg-screen-5.png) no-repeat center;

width: 2686px;

height: 572px;

position: absolute;

left: 50%;

margin-left: -1343px;

bottom: -120px;

}

/* 第六屏 */

.screen_6 {

width: 100%;

height: 320px;

background: url(../img/bg-screen-buy.png) no-repeat center;

background-size: cover;

position: relative;

}

.screen_6_wrap {

border-radius: 5px;

text-align: center;

font-size: 24px;

width: 240px;

height: 80px;

line-height: 80px;

background-color: #f01414;

position: absolute;

top: 120px;

left: 50%;

margin-left: -120px;

cursor: pointer;

}

.screen_6_wrap a {

color: #ffffff;

}

/* 旁边固定导航栏 */

.fixd {

background-color: #ffffff;

position: fixed;

right: 0;

bottom: 20%;

text-align: center;

z-index: 500;

}

.fixd a {

display: block;

width: 56px;

height: 47px;

}

.fixd a {

color: #93999f;

line-height: 47px;

font-size: 12px;

}

.fixd a:not(:last-of-type) {

border-bottom: 1px solid #edf1f2;

}

.fixd .fixd_item_active {

color: #f01414;

}

/* 底部 */

footer {

width: 100%;

height: 80px;

background-color: #07111b;

color: #ffffff;

line-height: 80px;

text-align: center;

}

// 封装querySelector和querySelectorAll获取元素的方法

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);

// 如果baseCls元素没有cls样式,则设置元素样式

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, ''));

}

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

var screenAnimateElements = {

'.screen_1': [

'.screen_1_text',

'.screen_1_phone',

'.screen_1_shadow',

'.screen_2': [

'.screen_2_head',

'.screen_2_phone',

'.screen_2_point_it1',

'.screen_2_point_it2',

'.screen_2_point_it3',

'.screen_3': [

'.screen_3_head',

'.screen_3_phone',

'.screen_3_box1',

'.screen_3_box2',

'.screen_3_box3',

'.screen_3_box4',

'.screen_4': [

'.screen_4_head',

'.screen_4_phone1',

'.screen_4_phone2',

'.screen_4_phone3',

'.screen_4_phone4',

'.screen_5': [

'.screen_5_head',

'.screen_5_bg',

]

};

var setScreenAnimateInit = function (screenCls) {

var screen = document.querySelector(screenCls); // 获取当前屏的元素

var animateElements = screenAnimateElements[screenCls]; // 需要设置动画的元素

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

//获取当前动画元素的classNmae

var element = document.querySelector(animateElements[i]);

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

//设置当前动画元素的classNmae,增加'_animate_init'

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

//设置当前动画元素的classNmae,把'_animate_init'替换成'_animate_done'

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

}

//当页面加载完成时,初始化样式 init

window.onload = function () {

for (k in screenAnimateElements) {

if(k==='.screen_1');

continue;

setScreenAnimateInit(k);

}

// 第二部,滚动到哪里,就播放到哪里,

window.onscroll = function () {

var nav_bar = getAllElem(".nav_bar");

var fixd_item = getAllElem('.fixd_item');

// 第三步,双向定位

//当页面滚动到对应的屏,导航栏和大纲就增加对应的active样式

var switchNavBarActive = function (index) {

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

delCls(nav_bar[i], 'nav_active');

navTip.style.left = 0 + 'px';

}

addCls(nav_bar[index], 'nav_active');

navTip.style.left = (index * 70) + 'px';

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

delCls(fixd_item[i], 'fixd_item_active');

}

addCls(fixd_item[index], 'fixd_item_active');

}

switchNavBarActive(0);

//获取当前滚动的高度

var top = document.body.scrollTop || document.documentElement.scrollTop;

//当高度大于80时,导航栏添加header_staic_back样式,大纲添加fixd_staic_back样式

if (top > 80) {

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

addCls(getElem('.fixd'), 'fixd_staic_back');

//当高度小于80时,导航栏删除header_staic_back样式,大纲删除fixd_staic_back样式

} else {

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

delCls(getElem('.fixd'), 'fixd_staic_back');

}

//当高度大于1时,播放第一屏的动画

if (top > 1) {

playScreenAnimateDone('.screen_1');

}

//当高度大于800*1 -100时,播放第二屏的动画

if (top > 800 * 1 - 100) {

playScreenAnimateDone('.screen_2');

switchNavBarActive(1);

}

//当高度大于800*2 -100时,播放第三屏的动画

if (top > 800 * 2 - 100) {

playScreenAnimateDone('.screen_3');

switchNavBarActive(2);

}

//当高度大于800*3 -100时,播放第四屏的动画

if (top > 800 * 3 - 100) {

playScreenAnimateDone('.screen_4');

switchNavBarActive(3);

}

//当高度大于800*4 -100时,播放第五屏的动画

if (top > 800 * 4 - 100) {

playScreenAnimateDone('.screen_5');

switchNavBarActive(4);

}

// 第四步,滑动门特效

var navTip = getElem('.hader_nav_bar');

var nav_bar = getAllElem(".nav_bar");

var setTip = function(index){

nav_bar[index].onmouseover = function(){

navTip.style.left = (index * 70) + 'px';

}

var activeIndex = 0;

nav_bar[index].onmouseout = function(){

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

if(getCls(nav_bar[i]).indexOf('nav_active')){

activeIndex = i;

break;

}

navTip.style.left = (activeIndex * 70) + 'px';

}

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

setTip(i);

}

setTimeout(function(){

playScreenAnimateDone('.screen_1');

},500)

老师您好请帮我检查下，最后那个小优化我加了第一屏的主动播放后，后面几个屏都没有动画了，是怎么回事呢？

weixin_慕粉6116347 2020-03-03

源自：宣传页项目 5-5 JS实现滑动门效果

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2020-03-03 18:50:08

同学你好，新的提问已经回答，如下：

https://class.imooc.com/course/qadetail/199094

祝学习愉快！

收起回答

好帮手慕夭夭 2020-03-03 16:02:35

同学你好，动画样式没有粘贴上来，老师这边看不到所有的动画，请把animate.css粘贴上来，以便老师测试定位问题。

祝学习愉快！

收起回答

提问者 weixin_慕粉6116347 #1

好的老师，我再粘贴一次

2020-03-03 16:47:23

相似问题

老师请检查

老师检查一下

老师，你好。控制台报错

请老师检查!

请老师检查！

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

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

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

了解课程

本课精华内容

问答作业

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

16 1

请老师检查

65 3

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

26 3

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

18 1

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

188 1

查看更多本课问答

请稍等 ...

老师你好！请检查

老师你好！请检查

正在回答

请选择置顶位置