老师,我不知道为什么页头不能获取class?

老师,我不知道为什么页头不能获取class?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!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 &copy 2015 imooc.com All Rights Reserved |&nbsp京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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// 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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
.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-size20px;
    font-weight:bold;
    backgroundurl(../img/logo.png) 10px  center no-repeat ;
    background-size:40px 40px;
    position:absolute;
    text-indent60px/*这个是让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;
    positionrelative;
     
}
.header_nav-item_button{
    background:red;
    color:white;
    width:90px;
    height:50px;
    border-radius:3px;
    text-aligncenter;
    margin-left40px;
    /*margin-top:10px;*/
    padding:0;
}
/*第一屏*/
.screen-1{
    height:640px;
    background:url(../img/sc1.jpg) no-repeat center;
    background-size:cover; /*背景图平铺*/
    overflowhidden;
}
.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;
    overflowhidden;
    /*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;
    overflowhidden;
}
.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;
    overflowhidden;
    z-index2;
}
.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;
    overflowhidden;
    z-index1;
}
/*第三屏*/
.screen-3{
    height:640px;  
    backgroundurl(../img/sc3.png) 100px center no-repeat;
    background-size:contain;
    background-color:#2b333b;/*注意颜色写在图片的下面才能实现颜色图片都显示*/
}
.screen-3_wrap{
    width:1200px;
    height:640px;
    margin:0 auto;
    positionrelative;
}
 
.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-top3px;
}
 
.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;
    positionrelative;
    /*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;
    positionabsolute;
    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-index2;
    positionabsolute;
    left50%;
    margin-left:-100px;
    padding-top:200px;
    overflowhidden;
}
 
.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-size20px;
    padding:10px 20px;
}
.footer{
    height:120px;
    background-colorblack;
 
}
.footer-nav,
.footer-nav_item
{
    height:60px;
    line-height60px;
    text-align:center;
    color:white;
}
.footer-nav_item{
    font-weight:bold;
    padding-right:20px;
 
}
.footer-nav span{
    font-size:15px;
    font-weightnormal;
    opacity:.7;
}
.outline{
    positionfixed;
    right:0;
    bottom:150px;
    /*z-index:1;*/
    background:white;
    padding:2px 10px;
    box-shadow: 0px 4px 12px 0px rgba(717270.1);
 
}
.outline_item{
    color:black;
    display:block;/*这样就垂直方向排列了*/
    padding10px;
}


正在回答

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

2回答

同学你好, 首先, 你这里是可以获取到header, 可以打印一下查看结果

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

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

因为同学是给元素绑定的点击事件, 只有点击对应的元素的时候才会触发该事件,执行动画效果,所以同学如下图的这种写法, 需要点击header才可以看到给头部设置的动画哦

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

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

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~~

好帮手慕夭夭 2019-08-17 16:18:15

你好同学,不知道你说的获取是在哪里获取呢,要做什么?请详细描述一下,以便老师为你解答。

祝学习愉快!

  • 提问者 慕勒8522502 #1
    就是screen1里的两行字都可以动了,但是header不行,然后我试了试把header加进screen1,就是'.screen-1' : [ '.header', '.screen-1_heading', '.screen-1_subheading', //此处的逗号在IE下要去掉 ], 这样之后就可以了,不知道是为什么?
    2019-08-17 22:54:30
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码