老师看一下，js里一直出现错误
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/animate.css"> </head> <body> <div class="box"> <!--导航--> <header class="header"> <div class="header__logo">H5实战页面</div> <div class="header__nav"> <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">云端学习</a> <a href="#" class="header__nav-item button">即刻学习</a> </div> </header> <!--第一屏--> <div class="screen__1"> <div class="screen__1-heading">实战课程重磅上线</div> <div class="screen__1-sub-heading">一键云学习，还在等什么？</div> </div> <!--第二屏--> <div class="screen__2"> <div class="screen__2-heading">每门课都是真实商业案列</div> <div class="screen__2-sub-heading">真实案例，真实场景，在实战中实践、操作、调试?<br/>大牛带你体验BAT真实开发流程，所有开发过程一一为你呈现</div> <div class="screen__2-photo"> <div class="screen__2-photo-person"></div> <div class="screen__2-photo-rocket"></div> </div> </div> <!--第三屏--> <div class="screen__3"> <div class="screen__3-photo"></div> <div class="screen__3-heading">强大的语言课程体系支持</div> <div class="screen__3-sub-heading">学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决<br/>让你体验开发全流程</div> <div class="screen__3-circle"> <div class="screen__3-item screen__3-item-1">HTML5</div> <div class="screen__3-item screen__3-item-2">PHP</div> <div class="screen__3-item screen__3-item-3">JAVA</div> <div class="screen__3-item screen__3-item-4">Python</div> <div class="screen__3-item screen__3-item-5">Node.js</div> </div> </div> <!--第四屏--> <div class="screen__4"> <div class="screen__4-heading">省去本地复杂的环境搭建</div> <div class="screen__4-sub-heading">你可以告别在虚拟机中调试开发</div> <div class="screen-4__type"> <div class="screen-4__type__item screen-4__type__item_i_1"> <div class="screen-4__type__item__intr">实战课程集成开发环境</div> </div> <div class="screen-4__type__item screen-4__type__item_i_2"> <div class="screen-4__type__item__intr">内置终端命令行</div> </div> <div class="screen-4__type__item screen-4__type__item_i_3"> <div class="screen-4__type__item__intr">编译你的应用程序</div> </div> <div class="screen-4__type__item screen-4__type__item_i_4"> <div class="screen-4__type__item__intr">通过云端服务输出效果</div> </div> </div> </div> <!--第五屏--> <div class="screen__5"> <div class="screen__5-pic"></div> <div class="screen__5-heading">云端学习可以这样简单</div> <div class="screen__5-sub-heading">看视频，敲代码，一气呵成。结合慕课网为你提供的云端学习工具，所见即所得。从此学习不一样</div> </div> <!--继续学习--> <div class="study"> <div class="study-but">继续了解学习体验</div> </div> <!--版权--> <footer class="footer"> <div class="footer__webline"> <a href="#" class="footer__webline-i">网站首页</a> <a href="#" class="footer__webline-i">人才招聘</a> <a href="#" class="footer__webline-i">联系我们</a> <a href="#" class="footer__webline-i">高校联盟</a> <a href="#" class="footer__webline-i">关于我们</a> <a href="#" class="footer__webline-i">讲师招募</a> <a href="#" class="footer__webline-i">意见反馈</a> <a href="#" class="footer__webline-i">友情链接</a> </div> <div class="footer__icp">Copyright © 2015 imooc.com All Rights Reserved | 京ICP备13046642号-2</div> </footer> <script type="text/javascript" src="js/index.js"></script> </div> </body> </html>
//获取元素
var getElem=function(selector){
return document.querySelector(selector);
}
var getAllElem=function(selector){
return document.querySelectorAll(selector);
}
//获取元素样式
var getCls = function(element){
return element.getAttribute('class',cls);
}
//设置元素样式
var setCls=function(element,cls ){
return element.setAtttribute('class',cls);
}
//为元素添加样式
var addCls=function(element,cls){
var baseCls=getCls(element);
if(baseCls.indexOf(cls)===-1){
setCls(element,baseCls+' '+cls);
}
return;
}
//为元素删减样式
var delCls=function(element,cls){
var baseCls=getCls(element);
if(baseCls.indexOf(cls)>-1){
setCls(element,baseCls.split(cls).join(' ').replace(/\s+/g,' '));
}
return;
}
var screenAnimateElements = {
'.screen-1': [
'.screen__1-heading',
'.screen__1-sub-heading',
],
'.screen-2': [
'.screen__2-heading',
'.screen__2-sub-heading',
'.screen__2-photo-person',
'.screen__2-photo-rocket'
],
'.screen-3': [
'.screen__3-photo',
'.screen__3-heading',
'.screen__3-sub-heading',
'.screen__3-item screen__3-item-1',
'.screen__3-item screen__3-item-2',
'.screen__3-item screen__3-item-3',
'.screen__3-item screen__3-item-4',
'.screen__3-item screen__3-item-5',
],
'.screen-4': [
'.screen__4-heading',
'.screen__4-sub-heading',
'.screen-4__type__item screen-4__type__item_i_1',
'.screen-4__type__item__intr',
'.screen-4__type__item screen-4__type__item_i_2',
'.screen-4__type__item screen-4__type__item_i_3',
'.screen-4__type__item screen-4__type__item_i_4',
],
'.screen-5': [
'.screen__5-pic',
'.screen__5-heading',
'.screen__5-sub-heading',
],
}
function setScreenAnimateInit(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');
}
}
setScreenAnimateInit("screen__1") ;*{
padding:0;
margin:0;
text-decoration: none;
}
.box{
width:100%;
height:auto;
}
.header{
width:100%;
height:80px;
position: fixed;
z-index:3;
}
.header__logo{
width:160px;
height:40px;
line-height:40px;
text-indent: 61px;
font-size:17px;
color:#fff;
font-weight:bold;
margin:10px 11px 0 10px;
background: url("../img/logo.png") left center no-repeat;
background-size:40px 40px;
}
.header__nav{
height:40px;
width:630px;
position: absolute;
right:0px;
top:10px;
}
.header__nav-item{
color:#fff;
font-size:12px;
height:40px;
line-height: 40px;
display:block;
float:left;
width:55px;
text-align:center;
padding-left:40px;
}
.button{
background-color:#f01400;
width:95px;
height:40px;
text-align:center;
border-radius: 3px;
margin-left:40px;
padding:0;
}
/*第一屏*/
.screen__1{
height:640px;
background:url("../img/sc1.jpg") no-repeat center;
background-size:cover;
}
.screen__1-heading{
width:335px;
height:40px;
line-height:40px;
position: absolute;
left:50%;
margin-left:-167px;
top:240px;
color:#fff;
font-weight:bold;
font-size:39px;
}
.screen__1-sub-heading{
width:204px;
height:17px;
line-height:17px;
position: absolute;
left:50%;
margin-left:-102px;
top:312px;
color:#fff;
font-size:16px;
}
/*第二屏*/
.screen__2{
height:640px;
background-color:#f3f5f7;
position: relative;
}
.screen__2-heading{
width:460px;
height:40px;
line-height:40px;
position: absolute;
left:50%;
margin-left:-230px;
top:90px;
color:#07111b;
font-weight:bold;
font-size:39px;
}
.screen__2-sub-heading{
width:430px;
height:40px;
line-height:20px;
position: absolute;
left:50%;
margin-left:-215px;
top:195px;
color:#07111b;
font-size:14px;
text-align:center;
}
.screen__2-photo{
height:381px;
width:681px;
background:url("../img/sc2.png" )center no-repeat;
position: absolute;
left:50%;
margin-left:-340px;
bottom:-10px;
}
.screen__2-photo-person{
width:285px;
height:381px;
position: absolute;
left:50%;
margin-left:-142px;
bottom:0;
background:url("../img/sc2-1.png") center no-repeat;
}
.screen__2-photo-rocket{
width:144px;
height:110px;
position: absolute;
top:66px;
right:119px;
background:url("../img/sc2-2.png") center no-repeat;
background-size:cover;
}
/*第三屏*/
.screen__3{
height:640px;
background-color:#2b333b;
position: relative;
}
.screen__3-photo{
height:632px;
width:565px;
background:url("../img/sc3.png") no-repeat;
background-size:cover;
position: absolute;
bottom:4px;
margin-left:134px;
}
.screen__3-heading{
width:400px;
height:35px;
line-height:35px;
position: absolute;
right:486px;
top:227px;
color:#fff;
font-weight:bold;
font-size:34px;
}
.screen__3-sub-heading{
width:514px;
height:45px;
line-height:22px;
position: absolute;
right:368px;
top:325px;
color:#f1ffe0;
font-size:16px;
}
.screen__3-circle{
width:520px;
height:58px;
right:390px;
position: absolute;
bottom:47px;
}
.screen__3-item{
width:54px;
height:54px;
line-height:58px;
border:4px solid;
border-radius: 50%;
text-align:center;
margin-left:37px;
margin-bottom:48px;
display:inline-block;
}
.screen__3-item-1{
color:#1f5975;
border-color:#1f5975;
}
.screen__3-item-2{
color:#7888fd;
border-color:#424d76;
}
.screen__3-item-3{
color:#af3a4c;
border-color:#6b4146;
}
.screen__3-item-4{
color:#24c7ca;
border-color:#294953;
}
.screen__3-item-5{
color:#839e4b;
border-color:#3e4e40;
}
/*第四屏*/
.screen__4{
height:640px;
background-color:#f3f5f7;
position: relative;
}
.screen__4-heading{
width:465px;
height:40px;
line-height:40px;
position: absolute;
left:50%;
margin-left:-232px;
top:90px;
color:#07111b;
font-weight:bold;
font-size:40px;
}
.screen__4-sub-heading{
width:240px;
height:15px;
line-height:15px;
position: absolute;
left:50%;
margin-left:-120px;
top:195px;
color:#07111b;
font-size:15px;
}
.screen-4__type{
width: 1300px;
height: 125px;
position: absolute;
top: 263px;
left:205px;
}
.screen-4__type__item{
width: 90px;
margin-left: 160px;
height: 70px;
float: left;
position: relative;
text-align: center;
background-size: cover;
}
.screen-4__type__item__intr{
width: 160px;
height: 14px;
line-height: 14px;
font: 14px;
color: #07111b;
position: absolute;
bottom:-39px;
left:-35px;
}
.screen-4__type__item_i_1{
background: url('../img/sc4-1.png') no-repeat left top;
}
.screen-4__type__item_i_2{
background: url('../img/sc4-2.png') no-repeat left top;
}
.screen-4__type__item_i_3{
background: url('../img/sc4-3.png') no-repeat left top;
}
.screen-4__type__item_i_4{
background: url('../img/sc4-4.png') no-repeat left top;
}
/*第四屏*/
.screen__5{
height:640px;
background:url("../img/sc5.jpg") center no-repeat;
background-size: cover;
position: relative;
}
.screen__5-pic{
width:212px;
height:207px;
position: absolute;
left:50%;
margin-left:-106px;
background:url("../img/sc5-1.png") center no-repeat;
top:100px;
}
.screen__5-heading{
width:420px;
height:40px;
line-height:40px;
position: absolute;
left:50%;
margin-left:-210px;
top:360px;
color:#fff;
font-weight:bold;
font-size:40px;
}
.screen__5-sub-heading{
width:688px;
height:16px;
line-height:16px;
position: absolute;
left:50%;
margin-left:-344px;
top:460px;
color:#fff;
font-size:16px;
}
/*继续学习*/
.study{
height:200px;
background-color:#fff;
position: relative;
}
.study-but{
width:240px;
height:60px;
line-height:60px;
color:#14191e;
font-size:15px;
position: absolute;
left:50%;
margin-left:-120px;
top:70px;
border:1px solid black;
text-align:center;
}
.study-but:hover{
cursor: pointer;
}
.footer{
height:106px;
background-color: #000;
position: relative;
}
.footer__webline{
width:760px;
height:14px;
line-height:14px;
position: absolute;
left:50%;
margin-left:-390px;
top:33px;
}
.footer__webline-i{
display:block;
float:left;
width:60px;
margin-left:35px;
height:14px;
font-size:14px;
color:#c8cdd2;
}
.footer__icp{
width:600px;
height:18px;
line-height:18px;
position: absolute;
left:50%;
margin-left:-280px;
font-size:17px;
color:#657d82;
top:60px;
}1
收起
正在回答
2回答
同学你好，
screenAnimateElements对象中的属性名要与html标签中class值一样：
因为在setScreenAnimateInit方法中，通过传入的参数不仅获取了元素，还获取了screenAnimateElements对象中属性值：
自己可以修改测试下，祝学习愉快！
欢迎采纳~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星