第二第三屏点击报错，其他屏都没问题

第二第三屏点击报错，其他屏都没问题

<!DOCTYPE html>
<html>
<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 id='top' class="body">
<header class="header">
<div class="header__logo">&nbsp;H5实战页面</div>
<nav class="header__nav">
<a href="#" class="header__nav-item header__nav-item_status_active">实战课程</a>
<a href="#" class="header__nav-item">商业案例</a>
<a href="#" class="header__nav-item">课程体系</a>
<a href="#" class="header__nav-item">集成环境</a>
<a href="#" class="header__nav-item">云端学习</a>
<a href="#" class="header__nav-item header__nav-item_custom_button">即可学习</a>
</nav>
</header>
<div class="screen-1">
<h2 class="screen-1__heading">实战课程重磅上线</h2>
<p class="screen-1__subheading">一键云学习，还在等待什么？</p>
</div>
<div class="screen-2">
<div class="screen-2-1"></div>
<div class="screen-2-2"></div>
<div class="screen-2-3"></div>
<h2 class="screen-2__heading">每门课都是真实商业案例</h2>
<p class="screen-2__subheading">真实案例，真实场景，在实站中实践、操作、调试<br>
        大牛带你体验BAT真实开发流程，所有开发过程为你一一呈现。</p>
</div>
<div class="screen-3">
<div class="screen-3__wrap">
<div class="screen-3__img"></div>
<div class="screen-3__wrap2">
<h2 class="screen-3__heading">强大的语言课程体系支持</h2>
<p class="screen-3__subheading">学习环境与课程轻松对接，安调、调试、写入、部署、运行，一站式解决<br>，让你体验开发全流程</p>
<div class="screen-3__yuan">
<div class="HTML5 yuanquan">HTML5</div>
<div class="PHP yuanquan">PHP</div>
<div class="java yuanquan">Java</div>
<div class="python yuanquan">Python</div>
<div class="node yuanquan">node.js</div>
</div>
</div>
</div>
</div>
<div class="screen-4">
<h2 class="screen-4__heading">省区本地复杂的环境搭建</h2>
<p class="screen-4__subheading">你可以告别在虚拟机中调试开发了</p>
<div class="screen-4__wrap">
<div class="screen-4__wrap__img1 imgs">
<p class="screen-4__wrap__img1__title">实战课程集成开发环境</p>
</div>
<div class="screen-4__wrap__img2 imgs">
<p class="screen-4__wrap__img1__title">内置终端命令行</p>
</div>
<div class="screen-4__wrap__img3 imgs">
<p class="screen-4__wrap__img1__title">编译你的应用程序</p>
</div>
<div class="screen-4__wrap__img4 imgs">
<p class="screen-4__wrap__img1__title">通过云端服务输出效果</p>
</div>
</div>
</div>
<div class="screen-5">
<div class="screen-5__img"></div>
<h2 class="screen-5__heading">云端学习可以这样简单</h2>
<div class="screen-5__subheading">看视频，敲代码一气呵成。结合慕课网为你提供的云端学习工具，所见即所得，从此学习不一样。</div>
</div>
<div class="screen-6">
<button class="screen-6__button">继续了解学习体验</button>
</div>
<div class="screen-7">
<a href="#top" class="screen-7__lianjie">网站首页</a>
<a href="#top" class="screen-7__lianjie">人才招聘</a>
<a href="#top" class="screen-7__lianjie">联系我们</a>
<a href="#top" class="screen-7__lianjie">高校联盟</a>
<a href="#top" class="screen-7__lianjie">关于我们</a>
<a href="#top" class="screen-7__lianjie">讲师招募</a>
<a href="#top" class="screen-7__lianjie">意见反馈</a>
<a href="#top" class="screen-7__lianjie">友情链接</a>
<div class="screen-7__lianjie2">Copyright &copy; 2015 imooc.com All Rights Reserved | 京ICP备 13046642号-2</div>
</div>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
.screen-1__heading,
.screen-1__subheading{
	transition: all 1s;
}
.screen-1__heading_animate_init{
	opacity: 0;
	transform: translate(0,-100%);
}
.screen-1__subheading_animate_init{
	opacity: 0;
	transform: translate(0,250%);
}
.screen-1__heading_animate_done,
.screen-1__subheading_animate_done{
	opacity: 1;
	transform: translate(0,0);
}
/*第二屏动画*/
.screen-2__heading{
    transition: all 1s;
}
.screen-2__subheading,
.screen-2-1{
    transition:all 1s .2s;
}
.screen-2-2{
    transition:all 1s 1s;
}
.screen-2__heading_animate_init,
.screen-2__subheading_animate_init{
    transform:translate(0,100%);
    opacity:0;
}
.screen-2__heading_animate_done,
.screen-2__subheading_animate_done{
    transform:translate(0,0);
    opacity:1;
}
.screen-2-2_animate_init{
    opacity:0;
}
.screen-2-2_animate_done{
    opacity:1;
}
.screen-2-1_animate_init{
    transform: translate(0,100%);
    opacity:0;
}
.screen-2-1_animate_done{
    transform: translate(0,0);
    opacity:1;
    -webkit-animation:tb 1s 1s;
}
@-webkit-keyframes tb{
    0%{transform: translate(0,100%);}
    60%{transform: translate(0,0);}
    90%{transform: translate(0,5%);}
    100%{transform: translate(0,0%);}
}
/*第三屏*/
.screen-3__img{
    transition: all 1s;
}
.screen-3__heading{
    transition: all 1s;
}
.screen-3__subheading{
    transition: all 1s .5s;
}
.screen-3__yuan{
    transition: all 1s 1s;
}
.screen-3__img_animate_init{
    transform: scale(0.3,0.3);
}
.screen-3__img_animate_done{
    transform: scale(1,1);
}
.screen-3__heading_animate_init,
.screen-3__subheading_animate_init{
    transform:translate(0,100%);
    opacity:0;
}
.screen-3__heading_animate_done,
.screen-3__subheading_animate_done{
    transform:translate(0,0);
    opacity:1;
}
.screen-3__yuan_animate_init{
    transform: translate(0,100%);
    opacity:0;
}
.screen-3__yuan_animate_done{
    transform: translate(0,0);
    opacity:1;
}
/*第四屏*/
.screen-4__heading,
.screen-4__wrap{
    transition: all 1s;
}
.screen-4__subheading{
    transition: all 1s .5s;
}
.screen-4__heading_animate_init,
.screen-4__subheading_animate_init{
    transform:translate(0,100%);
    opacity:0;
}
.screen-4__heading_animate_done,
.screen-4__subheading_animate_done{
    transform:translate(0,0);
    opacity:1;
}
.screen-4__wrap_animate_init{
    transform: scale(0);
    opacity:0;
}
.screen-4__wrap_animate_done{
    transform: scale(1);
    opacity:1;
}
/*第五屏*/
.screen-5__heading,
.screen-5__img{
    transition: all 1s;
}
.screen-5__subheading{
    transition: all 1s .5s;
}
.screen-5__img_animate_init{
    transform: scale(0);
    opacity:0;
}
.screen-5__img_animate_done{
    transform: scale(1);
    opacity:1;
}
.screen-5__heading_animate_init,
.screen-5__subheading_animate_init{
    transform:translate(0,100%);
    opacity:0;
}
.screen-5__heading_animate_done,
.screen-5__subheading_animate_done{
    transform:translate(0,0);
    opacity:1;
}
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;
}
/*头部*/
.header{
	height: 70px;
	position: fixed;
	width: 100%;
}
.header__logo{
	background:url('../img/logo.png') no-repeat left center;
	background-size: 38px 38px;
	left: 20px;
	width: 150px;
	height: 38px;
	line-height: 38px;
	text-indent: 49px;
	color: white;
	font-size: 17px;
	font-weight: bolder;
	position: absolute;
	top: 50%;
	margin-top: -19px;
}
.header__nav{
	position: absolute;
	right: 20px;
	top: 50%;
	height: 38px;
	margin-top: -19px;
}
.header__nav-item{
	color: #292f35;
	font-size: 14px;
	display: block;
	height: 38px;
	color: white;
	line-height: 38px;
	text-align: center;
	float: left;
	position: relative;
	margin-left: 40px;
}
.header__nav-item_status_active::after{
	content: ' ';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	background-color: red;
	width:100%;
}
.header__nav-item_custom_button{
	background: red;
	width: 110px;
	height: 40px;
	line-height: 40px;
	border-radius: 3px;
}
.header__nav-item_custom_button:hover{
	opacity: .9;
}
.screen-1{
	height: 640px;
	background: url(../img/sc1.jpg)no-repeat;
	background-size: cover;
	text-align: center;
	color: white;
}
.screen-1__heading{
	padding-top: 210px;
	font-size: 43px;
	font-weight: bold;
}
.screen-1__subheading{
	font-size: 17px;
}
.screen-2{
	height: 640px;
	position: relative;
	text-align: center;
}
.screen-2-1{
	background:url('../img/sc2-1.png');
	height: 205px;
	z-index: 2;
	width: 266px;
	position: absolute;
	bottom: 101px;
	left: 50%;
	margin-left: -133px;
	margin-left: -30px;
}
.screen-2-2{
	background:url('../img/sc2-2.png');
	height: 380px;
	width: 275px;
	z-index: 3;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -137.5px;
}
.screen-2-3{
	background:url('../img/sc2-3.png');
	height: 361px;
	width: 750px;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -375px;
	z-index: 1;
}
.screen-2__heading{
	padding-top: 70px;
	font-size: 43px;
	font-weight: bold;
	position: relative;
	margin-bottom: 40px;
}
.screen-2__subheading{
	font-size: 17px;
}
.screen-2__heading::after{
	content: ' ';
	position: absolute;
	left: 50%;
	margin-left: -19px;
	height: 4px;
	background-color: red;
	width:38px;
	bottom: -22px;
}
.screen-3{
	height: 640px;
	background-color: #2b333b;
}
.screen-3__img{
	width: 580px;
    height: 640px;
    background: url(../img/sc3.png) left center no-repeat;
    background-size: 570px 620px;
    float: left;
}
.screen-3__wrap{
    width:80%;
    height:640px;
    margin:0 auto;
    position:relative;
}
.screen-3__wrap2{
	float: right;
	width: 675px;
	height: 100%;
}
.screen-3__heading{
	padding-top: 180px;
	font-size: 43px;
	color: white;
	font-weight: bold;
	width: 100%;
	position: relative;
	margin-bottom: 40px;
}
.screen-3__heading::after{
	content: ' ';
	position: absolute;
	left: 0;
	height: 4px;
	background-color: red;
	width:38px;
	bottom: -22px;
}
.screen-3__subheading{
	color: white;
}
.screen-3__yuan{
	width: 700px;
	height: 65px;
	position: absolute;
	bottom: 65px;
}
.HTML5{
    border:3px solid #1f5975;
    color:#17b0ff;
}
.PHP{
    border:3px solid #424d76;
    color:#7888fd;
}
.java{
    border:3px solid #6b4146;
    color:#ff584c;
}
.python{
    border:3px solid #29535f;
    color:#24c7ca;
}
.node{
    border:3px solid #3e4e40;
    color:#90bd56;
}
.yuanquan{
	height: 64px;
	width: 64px;
	text-align: center;
	line-height: 64px;
	font-weight: bold;
	border-radius: 50%;
	float: left;
	margin-right: 50px;
}
.screen-4{
	height: 640px;
	text-align: center;
}
.screen-4__heading{
	padding-top: 100px;
	font-size: 43px;
	font-weight: bold;
	position: relative;
	margin-bottom: 60px;
}
.screen-4__heading::after{
	content: ' ';
	position: absolute;
	height: 4px;
	left: 50%;
	margin-left: -19px;
	background-color: red;
	width:38px;
	bottom: -24px;
}
.screen-4__subheading{
	font-size: 16px;
}
.screen-4__wrap{
	width: 1246px;
	height: 112px;
	margin-left: 451px;
	text-align: center;
	position: relative;
	margin: 0 auto;
	padding-top: 85px;
}
.screen-4__wrap__img1{
	background:url('../img/sc4-1.png');
	position: relative;
	margin-right: 210px;
}
.screen-4__wrap__img2{
	background:url('../img/sc4-2.png');
	margin-right: 210px;
	position: relative;
}
.screen-4__wrap__img3{
	background:url('../img/sc4-3.png');
	margin-right: 210px;
	position: relative;
}
.screen-4__wrap__img4{
	background:url('../img/sc4-4.png');
	position: relative;
}
.screen-4__wrap__img1__title{
	position: absolute;
	bottom: -10px;
	font-weight: bold;
	font-size: 15px;
	left: -5px
}

.imgs{
	width: 154px;
	float: left;
	height: 112px;
	background-repeat: no-repeat;
}
.screen-5{
	height: 640px;
	background:url('../img/sc5.jpg')no-repeat;
	background-size: cover;
	text-align: center;
	color: white;
}
.screen-5__img{
	background: url('../img/sc5-1.png')center no-repeat;
	height: 197px;
	padding-top: 171px;
}
.screen-5__heading{
	margin-top: -38px;
	font-size: 43px;
	font-weight: bold;
	position: relative;
	margin-bottom: 60px;
}
.screen-5__heading::after{
	content: ' ';
	position: absolute;
	height: 4px;
	left: 50%;
	margin-left: -24px;
	background-color: white;
	width:48px;
	bottom: -20px;
}
.screen-5__subheading{
	font-size: 16px;
}
.screen-6{
	height: 193px;
	position: relative;
	background-color: #fff;
}
.screen-6__button{
	height: 57px;
	border-radius: 5px;
	width: 230px;
	background-color: white;
	border:1px solid gray;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -115px;
	margin-top: -28.5px;
	font-size: 17px;
	font-weight: bold;
	cursor: pointer;
}
.screen-6__button:hover{
	opacity: .8;
}
.screen-7{
	height: 102px;
	background-color: black;
	text-align: center;
}
.screen-7__lianjie{
	color: gray;
	margin-right: 40px;
	font-size: 12px;
	margin-top: 25px;
	display: inline-block;
}
.screen-7__lianjie2{
	color: gray;
	font-size: 16px;
	margin-top: 13px;
}
var screenAnimateElements = {
  '.screen-1' : [
    '.screen-1__heading',
    '.screen-1__subheading',
  ],
  '.screen-2' : [
    '.screen-2__heading',
    '.screen-2__subheading',
    'screen-2-1',
    'screen-2-2',
  ],
  '.screen-3' : [
    'screen-3__img',
    'screen-3__heading',
    '.screen-3__subheading',
    '.screen-3__yuan',
  ],
  '.screen-4' : [
    '.screen-4__heading',
    '.screen-4__subheading',
    '.screen-4__wrap',
  ],
  '.screen-5' : [
     '.screen-5__heading',
    '.screen-5__subheading',
    '.screen-5__img',
  ]

};

function setScreenAnimate(screenCls) {

  var screen = document.querySelector(screenCls); // 获取当前屏的元素
  var animateElements =  screenAnimateElements[screenCls]; // 需要设置动画的元素

  var isSetAnimateClass = false; // 是否有初始化子元素的样式

  var isAnimateDone = false; // 当前屏幕下所有子元素的状态是DONE？

  screen.onclick = function(){

    //  初始化样式，增加init A A_init
    if( isSetAnimateClass === false){
        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');
        }
        isSetAnimateClass = true;
        return ;
    }
    //  切换所有 animateElements 的  init -> done   A A_done
    if(isAnimateDone === false){
      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'));
      }
      isAnimateDone = true;
      return ;
    }
    //  切换所有 animateElements 的  done -> init   A A_init
    if(isAnimateDone === true){
      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_done','_animate_init'));
      }
      isAnimateDone = false;
      return ;
    }

  }


}

for(k in screenAnimateElements){
  setScreenAnimate(k);
}
saill 2019-05-29
源自：宣传页项目   5-6 作业题
1
收起

正在回答

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

1回答
好帮手慕星星 回答被采纳获得+3积分 2019-05-29 15:24:18

你好，是第二屏第三屏中部分元素类名前面没有添加点：

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

添加上就没有问题了，可以重新测试下。

祝学习愉快！

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

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

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

0 星

相似问题

求助！测试代码到第二屏的时候出现
28 0 5
第三屏图片
113 0 10
这里的右侧导航条在第一屏里随页面滚动，在第二屏就消失了， 请指教~
0 0 3
拖动滚动条第一屏不显示是哪里的问题？
2 0 8
老师，第一屏滚动没有效果是怎么回事？麻烦老师帮忙看一下是哪里打错了
39 0 11

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

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

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

了解课程

本课精华内容

问答 作业

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

16 1

请老师检查

65 3

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

26 3

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

18 1

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

188 1

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

在线咨询

领取优惠

免费试听

领取大纲

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