老师，我不知道为什么页头不能获取class？
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>H5实战</title> <link rel="stylesheet" type="text/css" href="css/base.css"> <link rel="stylesheet" type="text/css" href="css/animate.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="box"> <header class="header"> <div class="header_wrap"> <div class="header_logo">H5实战页面</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_button">即刻学习</a> <div class="nav-underline"></div> </nav> </div> </header> <!-- 第一屏 --> <div class="screen-1"> <h2 class="screen-1_heading">实战课程重磅上线</h2> <h4 class="screen-1_subheading">一键云学习，还在等待什么？</h4> </div> <!-- 第二屏 --> <div class="screen-2"> <h2 class="screen-2_heading">每门课都是真实商业案例</h2> <hr class="screen-2_little-bar"> <h4 class="screen-2_subheading">真实案例，真实场景，在实战中实践、操作、调试<br/>大牛带你体验BAT真实开发流程，所有开发过程一一为你呈现</h4> <div class="screen-2_bg"> <div class="screen-2_bg1"></div> <div class="screen-2_bg2"></div> <div class="screen-2_bg3"></div> </div> </div> <!-- 第三屏 --> <div class="screen-3"> <div class="screen-3_pic"></div> <div class="screen-3_wrap"> <div class="screen-3_headings"> <h2 class="screen-3_heading">强大的语言课程体系支持</h2> <hr class="screen-3_little-bar"> <h4 class="screen-3_subheading">学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决<br/>，让你体验开发全流程</h4> </div> <div class="screen-3_item"> <div class="screen-3_item1"> <div class="screen-3_item1_circle1"></div> <div class="screen-3_item1_disc1">HTML5</div> </div> <div class="screen-3_item2"> <div class="screen-3_item2_circle2"></div> <div class="screen-3_item2_disc2">PHP</div> </div> <div class="screen-3_item3"> <div class="screen-3_item3_circle3"></div> <div class="screen-3_item3_disc3">JAVA</div> </div> <div class="screen-3_item4"> <div class="screen-3_item4_circle4"></div> <div class="screen-3_item4_disc4">Python</div> </div> <div class="screen-3_item5"> <div class="screen-3_item5_circle5"></div> <div class="screen-3_item5_disc5">Node.js</div> </div> </div> </div> </div> <!-- 第四屏 --> <div class="screen-4"> <div class="screen-4_wrap"> <h2 class="screen-4_heading">省去本地复杂的环境搭建</h2> <hr class="screen-4_little-bar"> <h4 class="screen-4_subheading">你可以告别在虚拟机中调试开发了</h4> <div class="screen-4_items"> <div class="screen-4_item-1"> <div class="screen-4_words">实战课程集成开发环境</div> </div> <div class="screen-4_item-2"> <div class="screen-4_words">内置终端命令行</div> </div> <div class="screen-4_item-3"> <div class="screen-4_words">编译你的应用程序</div> </div> <div class="screen-4_item-4"> <div class="screen-4_words">通过云端服务输出效果</div> </div> </div> </div> </div> <!-- 第五屏 --> <div class="screen-5"> <!-- 第五屏小图 --> <div class="screen-5_bg1"></div> <h2 class="screen-5_heading">云端学习可以这样简单</h2> <hr class="screen-5_little-bar"> <h4 class="screen-5_subheading">看视频，敲代码，一气呵成。结合慕课网为你提供的云端学习工具，所见即所得。从此学习不一样。</h4> </div> <!-- 继续了解学习体验 --> <div class="screen-6"> <a href="javascript:;" class="screen-6_button">继续了解学习体验</a> </div> <footer class="footer"> <div class="footer-nav"> <a href="javascript:;" class="footer-nav_item">网站首页</a> <a href="javascript:;" class="footer-nav_item">人才招聘</a> <a href="javascript:;" class="footer-nav_item">联系我们</a> <a href="javascript:;" class="footer-nav_item">高校联盟</a> <a href="javascript:;" class="footer-nav_item">关于我们</a> <a href="javascript:;" class="footer-nav_item">将是招募</a> <a href="javascript:;" class="footer-nav_item">意见反馈</a> <a href="javascript:;" class="footer-nav_item">友情链接</a> <br/> <span>Copyright © 2015 imooc.com All Rights Reserved | 京ICP备13046642号-2</span> </div> </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> </body> </html>
.header_wrap{
transition: all 1.5s;
}
.header_wrap_animate_init{
opacity: 0;
transform: translate(0,-100%);
}
.header_wrap_animate_done{
opacity: 1;
transform:translate(0,0);
}
.screen-1_heading
{
transition: all 1s;
}
.screen-1_subheading
{
transition: all 1.5s;
}
.screen-1_heading_animate_init,
.screen-1_subheading_animate_init{
opacity: 0;
transform: translate(0,100%); /*100%是指它本身高度的100%*/
}
.screen-1_heading_animate_done,
.screen-1_subheading_animate_done{
opacity: 1;
transform:translate(0,0);
}// alert("done");
var screenAnimateElements = {
'.header' : [
'.header_wrap',
],
'.screen-1' : [
'.screen-1_heading',
'.screen-1_subheading', //此处的逗号在IE下要去掉
],
};
// 第一步建立屏幕动画函数
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]);
// 给需要设置动画的元素添加class属性
var baseCls = element.getAttribute("class");//这样是为了不破坏原有的class，以防破坏之前设置好的样式
// 给需要设置动画的元素添加class属性
element.setAttribute('class',baseCls +' '+animateElements[i].substr(1)+'_animate_init');//此处的substr是为了去掉class name前面的那个点
}
//初始化子元素的样式
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]);
// 给需要设置动画的元素添加class属性
var baseCls = element.getAttribute("class");
// 给需要设置动画的元素添加class属性
element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
}
//当前屏幕下所有子元素的状态是DONE
isAnimateDone = true;
return ;
}
// 切换所有 animateElements 的 done -> init A A_init
// isAnimateDone === true判断当前屏幕下所有子元素的状态是DONE的时候，执行下列操作
if(isAnimateDone === true){
for(var i=0;i<animateElements.length;i++){
// 获取需要设置动画的元素
var element = document.querySelector(animateElements[i]);
// 给需要设置动画的元素添加class属性
var baseCls = element.getAttribute("class");
// 给需要设置动画的元素添加class属性
element.setAttribute('class',baseCls.replace('_animate_done','_animate_init'));
}
//当前屏幕下所有子元素的状态不是DONE
isAnimateDone = false;
return ;
}
}
}
// 遍历所有元素
for(k in screenAnimateElements){
// 调用这个函数，为所有元素添加init动画（_animate_init）
setScreenAnimate(k);
}.header{
background: rgba(0,0,0, .1);
position:fixed;
top:0;
width:100%;
}
.header_wrap{
width:100%;
height:60px;
position:relative;
border:1px solid red;
}
.header_logo{
width:20%; /*这里设置太小文字会换行*/
height:60px;
line-height:60px;
font-size: 20px;
font-weight:bold;
background: url(../img/logo.png) 10px center no-repeat ;
background-size:40px 40px;
position:absolute;
text-indent: 60px; /*这个是让logo后面的字右移的*/
color:white;
}
.header_nav{
right:40px;
height:50px;
top:50%;
margin-top:-25px;
position:absolute;/*只有写了上面还有这一句的position，导航才会到右边*/
}
.header_nav-item{
color:white;
font-size:16px;
display:block;
height:50px;
line-height:50px;
float:left;
padding-left:40px;
position: relative;
}
.header_nav-item_button{
background:red;
color:white;
width:90px;
height:50px;
border-radius:3px;
text-align: center;
margin-left: 40px;
/*margin-top:10px;*/
padding:0;
}
/*第一屏*/
.screen-1{
height:640px;
background:url(../img/sc1.jpg) no-repeat center;
background-size:cover; /*背景图平铺*/
overflow: hidden;
}
.screen-1_heading{
font-size:40px;
font-weight:1000;
color:white;
text-align:center;
padding-top:230px;
}
.screen-1_subheading{
font-size:15px;
font-weight:normal;
color:white;
text-align:center;
}
.screen-2{
background-color: #f3f5f7;
height:640px;
overflow: hidden;
/*position:relative;*/
}
.screen-2_heading{
font-size:40px;
font-weight:bold;
color:black;
text-align:center;
padding-top:20px;
}
.screen-2_little-bar{
width:40px;
height:3px;
border:none;
border-top:3px solid red;
}
.screen-2_subheading{
font-size:15px;
height:20px;
font-weight:normal;
color:black;
text-align:center;
}
.screen-2_bg{
position:relative;
left:50%;
margin-left:-325px;
}
.screen-2_bg1{
height:361px;
width:750px;
background:url(../img/sc2.png) center center no-repeat ;
background-size:contain;
position:absolute;
padding-top:150px;
overflow: hidden;
}
.screen-2_bg2{
height:380px;
width:275px;
background:url(../img/sc2-1.png) center center no-repeat ;
position:absolute;
margin-left:240px;
padding-top:110px;
overflow: hidden;
z-index: 2;
}
.screen-2_bg3{
height:205px;
width:266px;
background:url(../img/sc2-2.png) center center no-repeat ;
position:absolute;
margin-left:350px;
padding-top:260px;
overflow: hidden;
z-index: 1;
}
/*第三屏*/
.screen-3{
height:640px;
background: url(../img/sc3.png) 100px center no-repeat;
background-size:contain;
background-color:#2b333b;/*注意颜色写在图片的下面才能实现颜色图片都显示*/
}
.screen-3_wrap{
width:1200px;
height:640px;
margin:0 auto;
position: relative;
}
.screen-3_heading{
font-size:30px;
font-weight:bold;
color:white;
margin-left:600px;
padding-top:200px;
display:block;
}
.screen-3_little-bar{
width:40px;
height:3px;
border:none;
border-top:3px solid red;
margin-left:600px;
}
.screen-3_subheading{
font-size:15px;
height:20px;
font-weight:normal;
color:white;
text-align:left;
margin-left:600px;
}
.screen-3_item{
height:20px;
font-size:12px;
padding-top:200px;
margin-left:600px;
}
.screen-3_item1{
float:left;
color:#197bb8;
padding-left:50px;
}
.screen-3_item1_circle1,
.screen-3_item2_circle2,
.screen-3_item3_circle3,
.screen-3_item4_circle4,
.screen-3_item5_circle5{
width:60px;
height:60px;
border:3px solid ;
border-radius:50%;
float:left;
opacity:.5;
}
.screen-3_item1_disc1,
.screen-3_item2_disc2,
.screen-3_item3_disc3,
.screen-3_item4_disc4,
.screen-3_item5_disc5{
height:60px;
line-height:60px;
font-weight:bolder;
float:left;
margin-left:-55px;
margin-top: 3px;
}
.screen-3_item2{
float:left;
color:#4f5bac;
padding-left:50px;
}
.screen-3_item2_disc2{
margin-left:-46px;
}
.screen-3_item3{
float:left;
color:#99464d;
padding-left:50px;
}
.screen-3_item3_disc3{
margin-left:-49px;
}
.screen-3_item4{
float:left;
color:#277d8f;
padding-left:50px;
}
.screen-3_item5{
float:left;
color:#628448;
padding-left:50px;
}
/*第四屏*/
.screen-4{
height:640px;
background-color: #f3f5f7;
}
.screen-4_wrap{
width:1200px;
margin:0 auto;
text-align:center;
background-size:cover;
position: relative;
/*padding-top:30px;*/
}
.screen-4_heading{
font-size:40px;
font-weight:bold;
color:black;
text-align:center;
padding-top:40px;
}
.screen-4_little-bar{
width:40px;
height:3px;
border:none;
border-top:3px solid red;
}
.screen-4_subheading{
font-size:15px;
height:20px;
font-weight:normal;
color:black;
text-align:center;
}
.screen-4_items{
width:1200px;
height:300px;
margin-left:220px;
margin-top:60px;
}
.screen-4_item-1,
.screen-4_item-2,
.screen-4_item-3,
.screen-4_item-4{
width:220px;
height:80px;
float:left;
}
.screen-4_words{
width:100%;
height:14px;
line-height:14px;
position: absolute;
top:340px;
margin-left:-550px;
}
.screen-4_item-1{
background:url('../img/sc4-1.png') no-repeat left top;
}
.screen-4_item-2{
background:url('../img/sc4-2.png') no-repeat left top;
}
.screen-4_item-3{
background:url('../img/sc4-3.png') no-repeat left top;
}
.screen-4_item-4{
background:url('../img/sc4-4.png') no-repeat left top;
}
.screen-5{
height:640px;
width:100%;
background:url('../img/sc5.jpg') no-repeat center;
background-size: cover;
}
.screen-5_bg1{/*小图*/
width:200px;
height:200px;
background:url('../img/sc5-1.png') no-repeat center;
background-size: contain;
z-index: 2;
position: absolute;
left: 50%;
margin-left:-100px;
padding-top:200px;
overflow: hidden;
}
.screen-5_heading{
font-size:40px;
font-weight:bold;
color:white;
text-align:center;
padding-top:380px;
}
.screen-5_little-bar{
width:40px;
height:3px;
border:none;
border-top:3px solid white;
}
.screen-5_subheading{
font-size:15px;
height:20px;
font-weight:normal;
color:white;
text-align:center;
}
.screen-6{
height:160px;
text-align:center;
line-height:160px;
}
.screen-6_button{
color:black;
border:1px solid black;
border-radius:3px;
font-size: 20px;
padding:10px 20px;
}
.footer{
height:120px;
background-color: black;
}
.footer-nav,
.footer-nav_item
{
height:60px;
line-height: 60px;
text-align:center;
color:white;
}
.footer-nav_item{
font-weight:bold;
padding-right:20px;
}
.footer-nav span{
font-size:15px;
font-weight: normal;
opacity:.7;
}
.outline{
position: fixed;
right:0;
bottom:150px;
/*z-index:1;*/
background:white;
padding:2px 10px;
box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);
}
.outline_item{
color:black;
display:block;/*这样就垂直方向排列了*/
padding: 10px;
}3
收起
正在回答
2回答
同学你好， 首先， 你这里是可以获取到header， 可以打印一下查看结果
因为同学是给元素绑定的点击事件， 只有点击对应的元素的时候才会触发该事件，执行动画效果，所以同学如下图的这种写法， 需要点击header才可以看到给头部设置的动画哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星